jQuery ajax提交Form表单实例(附demo源码)


Posted in Javascript onApril 06, 2016

本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下:

Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。

如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢。

以前的处理方法

如Form代码如下:

<form id="Form1" action="action.aspx" method="post" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

当提交后,会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。

思考

如果不想刷新页面使用ajax,就又要在$.ajax中指定url,等信息,不好维护。

在网上查了一下,老早以前老外就有解决方案了。使用ajax直接按照Form信息直接提交。不刷新页面。

参考资料:http://jquery.malsup.com/form/

很好用,但我还是愿意自己写个自己用的。

核心JS代码

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: dataPara,
    success: fn
  });
}
//将form中的值转换为键值对。
function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

ajaxSubmit方法第一个参数,是要提交的form,第二个参数是ajax调用成功后的处理函数。

将form的action传递给ajax的url,form的method传递给ajax的type,再将格式化后的表单内容传递给data。

getFormJson方法将form的元素转化为json格式键值对。形如:{name:'aaa',password:'tttt'},注意将同名的放在一个数组里。

调用

//调用
$(document).ready(function(){
  $('#Form1').bind('submit', function(){
    ajaxSubmit(this, function(data){
      alert(data);
    });
    return false;
  });
});

在ajaxSubmit方法调用前,可验证数据是否正确,在alert(data)处可加入自己调用返回后处理代码。

在调用ajaxSubmit方法后,必须添加return false;语句防止Form真实提交。

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
JS控制伪元素的方法汇总
Apr 06 #Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 #Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 #Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 #Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 #Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP中的integer类型使用分析
2010/07/27 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python通过post提交数据的方法
2015/05/06 Python
对pandas中apply函数的用法详解
2018/04/10 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
三年级科学教学反思
2014/01/29 职场文书
《开国大典》教学反思
2014/04/19 职场文书
入党介绍人评语
2014/05/06 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
nginx 配置指令之location使用详解
2022/05/25 Servers
MySQL中order by的执行过程
2022/06/05 MySQL
app场景下uniapp的扫码记录
2022/07/23 Java/Android
JavaScript实现简单的音乐播放器
2022/08/14 Javascript