Jquery表單插件ajaxForm用法詳解

插件主要的方法：

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

示例代碼：

// wait for the DOM to be loaded 
$(document).ready(function() {  
   // bind 'myForm' and provide a simple callback function   
   $('#myForm').ajaxForm(function() {   
       alert("Thank you for your comment!");  
    }); 
}); 

下載地址： http://malsup.github.com/jquery.form.js

表單插件API

英文原文：http://www.malsup.com/jquery/form/#api

表單插件API提供了幾個方法，讓你輕鬆管理表單數據和進行表單提交。

ajaxForm（）

增長全部須要的事件監聽器，爲AJAX提交表單作好準備。ajaxForm不能提交表單。在document的ready函數中，使用ajaxForm來爲AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既能夠是一個回調函數，也能夠是一個Options對象。
可連接（Chainable）：能夠。

實例：

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

ajaxSubmit（）

立刻由AJAX來提交表單。大多數狀況下，都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既能夠是一個回調函數，也能夠是一個Options對象。
可連接（Chainable）：能夠。

實例：

// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
    // 提交表單
    $(this).ajaxSubmit();
    // 爲了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false
    return false;
   });

formSerialize（）

將表單串行化（或序列化）成一個查詢字符串。這個方法將返回如下格式的字符串：name1=value1&name2=value2。
可連接（Chainable）：不能， 這個方法返回一個字符串。

實例：

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

// 如今可使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString);

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();

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值）

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布爾標誌，表示數據是否必須嚴格按照語義順序（slower？）來進行提交。注意：通常來講，表單已經按照語義順序來進行了串行化（或序列化），除了type="image"的input元素。若是你的服務器有嚴格的語義要求，以及表單中包含有一個type="image"的input元素，就應該將semantic設置爲true。（譯註：這一段因爲沒法理解，翻譯出來可能語不達意，但請達人指正。）
默認值：false

resetForm

布爾標誌，表示若是表單提交成功是否進行重置。
Default value: null

clearForm

布爾標誌，表示若是表單提交成功是否清除表單數據。
默認值：null

實例：

// 準備好Options對象
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success: function() {
      alert('Thanks for your comment!');
    } };

   // 將options傳給ajaxForm
$('#myForm').ajaxForm(options);

注意：Options對象還能夠用來將值傳遞給jQuery的$.ajax方法。若是你熟悉$.ajax所支持的options，你能夠利用它們來將Options對象傳遞給ajaxForm和ajaxSubmit。

ajaxForm()適用於以表單提交方式處理ajax技術（須要提供表單的action、id、method，最好在表單中提供submit按鈕）它大大簡化了使用ajax技術提交表單時的數據傳遞問題，使用ajaxForm()你不須要逐個的以JavaScript的方式獲取每一個表單屬性的值，而且也不須要在請求路徑後面經過url重寫的方式傳遞數據。ajaxForm()會自動收集當前表單中每一個屬性的值，而後將其以表單提交的方式提交到目標url。這種方式提交數據較安全，而且使用起來更簡單，沒必要寫過多冗餘的JavaScript代碼

$(document).ready(function(){          registerForm'表單id data回調數據         $('#registerForm').ajaxForm(function(data){             alert(data);//彈出ajax請求後的回調結果         }); });

ajaxSubmit（）適用於以事件的機制以ajax提交form表單（超連接、圖片的click事件），該方法做用與ajaxForm()相似，但它更爲靈活，由於他依賴於事件機制，只要有事件存在就能使用該方法。你只需指定該form的action屬性便可，不須要提供submit按鈕。

$(document).ready(function(){     $('#btn').click(function(){             $('#registerForm').ajaxSubmit(function(data){                 alert(data);             });             return false;     });     }); 該段代碼做用是在表單中id爲btn的按鈕click事件觸發時經過ajaxSubmit（）方法以ajax技術提交表單到表單的action所指路徑

formSerialize（）是將一個form中全部的表單元素以name做爲key，value做爲值進行序列化操做，這就須要你必須爲每個表單元素設置表單元素name屬性及填充表單元素value的值，最好也設置id方便jquery定位表單元素。若要使用此方法你必須設置表單元素name屬性及填充表單元素value的值，我在初次使用時就忘了設置name屬性，最後在同事的幫助下找了很久才發現此錯誤。

var str=$('#registerForm').formSerialize(); // registerForm爲form id alert(str);

fieldSerialize（）是將form中表單元素進行序列化以name做爲key，value做爲值進行序列化操做，這就須要你必須爲每個表單元素設置表單元素name屬性及填充表單元素value的值。

var str=$('#username). fieldSerialize(); alert(str);