最開始，我們使用ajax提交表單，統一採用的是jquery的ajax函式，如下： 要麼繫結函式到按鈕的onclick事件上執行$.ajax，要麼在submit()中，使用$.ajax執行。 如下： [javascript] view plain copy  print?

1. $(function(){  
2.        $('#myForm').submit(function(){  
3.            $.ajax({  
4.                url:"/WebTest/test/testJson.do",  
5.                data:$('#myForm').serialize(),  
6.                dataType:"json",  
7.                error:function(data){  
8.                    alert(data);  
9.                },  
10.                success:function(data){  
11.                    alert(data);  
12.                }  
13.            });  
14.        });          
15.    })   

雖然功能上沒有問題，但覆蓋掉form自身的提交方法，美感上略顯不足。 後來Jquery.form.js橫空出世。 其中兩個核心函式：ajaxForm和ajaxSubmit 1、ajaxForm()一般放在$(document).ready中配置，配置完之後，並不是馬上的提交，而是要等submit()事件，它只是一個準備。 ajaxForm配置接受0個或1個引數。這個單個的引數既可以是一個回撥函式，也可以是一個Options物件。  該函式可連結（Chainable）。  大多數情況下，我們會增加自己需要的事件監聽器 一般用法（示例來自官網）： [javascript] view plain copy  print?

1. $(document).ready(function() {   
2.     var options = {   
3.         target:        '#output1',   // target element(s) to be updated with server response 
4.         beforeSubmit:  showRequest,  // pre-submit callback 
5.         success:       showResponse  // post-submit callback 
6.         // other available options: 
7.         //url:       url         // override for form's 'action' attribute 
8.         //type:      type        // 'get' or 'post', override for form's 'method' attribute 
9.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
10.         //clearForm: true        // clear all form fields after successful submit 
11.         //resetForm: true        // reset the form after successful submit 
12.         // $.ajax options can be used here too, for example: 
13.         //timeout:   3000 
14.     };   
15.     // bind form using 'ajaxForm' 
16.     $('#myForm1').ajaxForm(options).submit(function(){returnfalse;});   
17. });  

2、ajaxSubmit 馬上由AJAX來提交表單，它與ajaxForm最大的區別在於一個馬上提交表單，一個不馬上提交。大多數情況下，都是呼叫ajaxSubmit來對使用者提交表單進行響應。ajaxSubmit接受0個或1個引數。這個單個的引數既可以是一個回撥函式，也可以是一個Options物件。 可連結（Chainable） 一般用法（示例來自官網）： [javascript] view plain copy  print?

1. $(document).ready(function() {   
2.     var options = {   
3.         target:        '#output2',   // target element(s) to be updated with server response 
4.         beforeSubmit:  showRequest,  // pre-submit callback 
5.         success:       showResponse  // post-submit callback 
6.         // other available options: 
7.         //url:       url         // override for form's 'action' attribute 
8.         //type:      type        // 'get' or 'post', override for form's 'method' attribute 
9.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
10.         //clearForm: true        // clear all form fields after successful submit 
11.         //resetForm: true        // reset the form after successful submit 
12.         // $.ajax options can be used here too, for example: 
13.         //timeout:   3000 
14.     };   
15.     // bind to the form's submit event 
16.     $('#myForm2').submit(function() {   
17.         // inside event callbacks 'this' is the DOM element so we first 
18.         // wrap it in a jQuery object and then invoke ajaxSubmit 
19.         $(this).ajaxSubmit(options);   
20.         // !!! Important !!! 
21.         // always return false to prevent standard browser submit and page navigation 
22.         returnfalse;   
23.     });   
24. });   

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頁面，不知道效能表現如何，有興趣的可以一起研究下。