11.jQuery UI Ajax表单插件

   传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而form.js

表单的Ajax 提交插件将解决这个问题。

一．核心方法

官方网站：http://malsup.com/jquery/form/   

   form.js 插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表

单元素到决定如何管理提交进行的功能。

//ajaxForm 提交方式
$('#reg').ajaxForm(function () {

   alert('提交成功！');

});

注意：使用ajaxForm()方法，会直接实现ajax 提交。自动阻止了默认行为，而它提交的默认页

面是form 控件的action 属性的值。提交的方式是method 属性的值。

//ajaxSubmit()提交方式
$('#reg').submit(function () {

   $(this).ajaxSubmit(function () {

      alert('提交成功！');

   });

   return false;

});

注意：ajaxForm()方法，是针对form 直接提交的，所以阻止了默认行为。而ajaxSubmit()方法，

由于是针对submit()方法的，所以需要手动阻止默认行为。而使用了form.js 验证插件，那么

ajaxSubmit()比较适合我们。

二．option 参数

option 参数是一个以键值对传递的对象，可以通过这个对象，设置各种Ajax 提交的功能。

$('#reg').submit(function () {

   $(this).ajaxSubmit({

      url : 'test.jsp',    //设置提交的url，可覆盖action 属性

      target : '#box',   //服务器返回的内容存放在#box 里

      type : 'POST',    //GET,POST

      dataType : null,    //xml,json,script，默认为null

      clearForm : true,   //成功提交后，清空表单

      resetForm : true,    //成功提交后，重置表单

      data : {      //增加额外的数据提交

         aaa : 'bbb',

         ccc : 'ddd'.

      },

      beforeSubmit : function (formData, jqForm, options) {

         alert(formData[0].name);    //得到传递表单元素的name

         alert(formData[0].value);    //得到传递表单元素的value

         alert(jqForm);    //得到form 的jquery 对象

         alert(options);    //得到目前options 设置的属性

         alert('正在提交中！！！');

         return true;

      },

      success : function (responseText, statusText) {

         alert(responseText + statusText);    //成功后回调

      },

      error : function (event, errorText, errorType) {    //错误时调用

         alert(errorText + errorType);

      },

   });

   return false;

});

三．工具方法

   form.js 除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提

交前或后对数据或表单进行处理的。

//表单序列化
alert($('#reg').formSerialize());

//序列化某一个字段
alert($('#reg #user').fieldSerialize());

//得到某个字段的value 值
alert($('#reg #user').fieldValue());

//重置表单
$('#reg').resetForm();

//清空某个字段
$('#reg #user').clearFields();