详解Jquery.form.js

2004 年 Gmail 像风一样的女子来到人间，很快 2005 年 Ajax 正式提出，作为Web开发重点的form自然也得到了恩惠。

最开始，我们使用ajax提交表单，统一采用的是jquery的ajax函数，如下：

要么绑定函数到按钮的onclick事件上执行$.ajax，要么在submit()中，使用$.ajax执行。

如下：

 $(function(){
        $('#myForm').submit(function(){
            $.ajax({
                url:"/WebTest/test/testJson.do",
                data:$('#myForm').serialize(),
                dataType:"json",
                error:function(data){
                    alert(data);
                },
                success:function(data){
                    alert(data);
                }
            });
        });        
    }) 

虽然功能上没有问题，但覆盖掉form自身的提交方法，美感上略显不足。

后来Jquery.form.js横空出世。

其中两个核心函数：ajaxForm和ajaxSubmit

1、ajaxForm()一般放在$(document).ready中配置，配置完之后，并不是马上的提交，而是要等submit()事件，它只是一个准备。

ajaxForm配置接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 

该函数可链接（Chainable）。 

大多数情况下，我们会增加自己需要的事件监听器

一般用法（示例来自官网）：

$(document).ready(function() { 
    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 
    }; 
 
    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options).submit(function(){return false;}); 
});

2、ajaxSubmit 马上由AJAX来提交表单，它与ajaxForm最大的区别在于一个马上提交表单，一个不马上提交。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）

一般用法（示例来自官网）：

$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // 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 
    }; 
 
    // bind to the form's submit event 
    $('#myForm2').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 

Options对象 

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合： 

target 

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。 

默认值：null。 

url 

指定提交表单数据的URL。 

默认值：表单的action属性值 

type 

指定提交表单数据的方法（method）：“GET”或“POST”。 

默认值：表单的method属性值（如果没有找到默认为“GET”）。 

beforeSubmit 

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据： 

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]  

默认值：null 

success 

表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 

默认值：null 

dataType 

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 

'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。 

'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。 

'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。 

默认值：null（服务器返回responseText值） 

resetForm 

布尔标志，表示如果表单提交成功是否进行重置。 

Default value: null 

clearForm 

布尔标志，表示如果表单提交成功是否清除表单数据。 

默认值：null 

参数小结一下：

target        返回的结果将放到这个target下

url           如果定义了，将覆盖原form的action

type          get和post两种方式

dataType      返回的数据类型，可选：json、xml、script

clearForm     true，表示成功提交后清除所有表单字段值

resetForm     true，表示成功提交后重置所有字段

iframe        如果设置，表示将使用iframe方式提交表单

beforeSerialize    数据序列化前：function($form,options){}

beforeSubmit  提交前：function(arr,$from,options){}

success       提交成功后：function(data,statusText){}

error         错误：function(data){alert(data.message);} 

3、jquery.form.js除了以上核心api外，还有几个不可缺少的辅助api

formSerialize 

将表单串行化（或序列化）成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 

可链接（Chainable）：不能， 这个方法返回一个字符串。 

实例： 

var queryString = $('#myFormId').formSerialize();  

  

fieldSerialize 

将表单的字段元素串行化（或序列化）成一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 

可链接（Chainable）：不能，这个方法返回一个字符串。 

实例： 

var queryString = $('#myFormId .specialFields').fieldSerialize();  

fieldValue 

返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。 

可链接（Chainable）：不能，该方法返回数组。 

实例： 

var value = $('#myFormId :password').fieldValue();   

alert('The password is: ' + value[0]);   

resetForm 

通过调用表单元素原有的DOM方法，将表单恢复到初始状态。  可链接（Chainable）：可以。 

实例： 

$('#myFormId').resetForm();  

clearForm 

清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。  可链接（Chainable）：可以。 

实例： 

$('#myFormId').clearForm();  

clearFields 

清除字段元素。只有部分表单元素需要清除时才方便使用。  可链接（Chainable）：可以。 

实例： 

$('#myFormId .specialFields').clearFields();  

用得多了，总是不经意间想去看看这个东西的全貌，甚至想去看看人家是怎么实现的，看了之后才发现自己对jquery的理解还是浅薄了，怎么人家封出来的东西无论从易用性和美感上都那么精妙呢，自己需要学习的还有很多啊，得多借鉴别人的东西，不能自己闷头造车了。

后续会做一个小项目，使用全ajax，json方式，严格实现前后端的分离，彻底摒弃返回JSP的方式，回归纯html页面，不知道性能表现如何，有兴趣的可以一起研究下。