1. 程式人生 > >詳解Jquery.form.js

詳解Jquery.form.js

最開始,我們使用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頁面,不知道效能表現如何,有興趣的可以一起研究下。