JQuery ajaxForm（）与ajaxSubmit（）的使用

项目中用到ajax处理form表单的两种方法ajaxForm（）、ajaxSubmit（）

需要插件：

<script src="/js/jquery-form.js"></script>

参数：

var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 };var options = { target: ‘#output’, //把服务器返回的内容放入id为output的元素中 beforeSubmit: showRequest, //提交前的回调函数 success: showResponse, //提交后的回调函数 //url: url, //默认是form的action， 如果申明，则会覆盖 //type: type, //默认是form的method（get or post），如果申明，则会覆盖 //dataType: null, //html(默认), xml, script, json…接受服务端返回的类型 //clearForm: true, //成功提交后，清除所有表单元素的值 //resetForm: true, //成功提交后，重置所有表单元素的值 timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求 }

html代码：

<form action="" id="userinfo" class="userinfo" method="post"><div>姓名：<input name="name" type="text" class="userbox"></div><div>年龄：<input name="age" type="text" class="userbox"></div><div>性别：<input name="gender" type="text" class="userbox"></div><div><input class="submitbtn" type="submit" value="提交"></div></form>

JavaScript代码：

$('.userinfo').ajaxForm({ });$('.submitbtn').submit(function () { var $this = $(this); $('form').ajaxSubmit({ success: function (data) { if (data.status === 's') { toastr.success('Submitted successfully.'); } }, error: function () { showNotificationError(); } }); return false;});

区别：

ajaxForm（）不能提交表单，函数只是为提交表单做准备，当点击提交按钮时才会提交表单；适用于以表单提交方式处理ajax技术，需要提供表单的action、id、method，最好在表单中提供Submit按钮。它大大简化了使用ajax技术提交表单时的数据传递问题，使用时不需要逐个以JavaScript的方式获取每个表单属性的值，并且不需要在请求路径后面通过URL重写的方式传递数据。ajaxForm（）会自动收集当前表中每个属性的值，然后将其以表单提交的方式提交到目标URL。这种方式提交数据安全，并且使用起来更简单，不必写过多冗余的JavaScript代码。

ajaxSubmit（）会主动提交表单，若要阻止表单提交需要return false；适用于以事件机制ajax提交表单（超链接、图片的click事件），该方法作用与ajaxForm（）类似，只要有事件就能使用该方法。只需要指定该form的action属性即可。