Ajaxfrom插件使用

Ajaxfrom插件使用

插件主要的方法：

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

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

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

ajaxForm（）

增加所有需要的事件監聽器，爲AJAX提交表單做好準備。ajaxForm不能提交表單。在document的ready函數中，使用ajaxForm來爲AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既可以是一個回調函數，也可以是一個Options對象。
可鏈接（Chainable）：可以。

實例：

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

ajaxSubmit（）

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

1	// 綁定表單提交事件處理器			​	​	​	​	​	​
2	$('#myFormId').submit(function() {				​	​	​	​	​
3	// 提交表單	​	​	​	​	​	​	​	​
4	$(this).ajaxSubmit();		​	​	​	​	​	​	​
5	// 爲了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false
6	return false;								​
7	});							​	​
8	​						​	​	​
9	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值）

布爾標誌，表示數據是否必須嚴格按照語義順序（slower？）來進行提交。注意：一般來說，表單已經按照語義順序來進行了串行化（或序列化），除了type="p_w_picpath"的input元素。如果你的服務器有嚴格的語義要求，以及表單中包含有一個type="p_w_picpath"的input元素，就應該將semantic設置爲true。（譯註：這一段由於無法理解，翻譯出來可能語不達意，但請達人指正。）
默認值：false

resetForm 

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

clearForm 

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

實例：

// 準備好Options對象

1	var options = {						​	​	​
2	target:      '#divToUpdate',							​	​
3	url:         'comment.php',					​	​	​	​
4	success: function() {				​	​	​	​	​
5	alert('Thanks for your  comment!');
6	} };								​
7	​		​	​	​	​	​	​	​
8	// 將options傳給ajaxForm			​	​	​	​	​	​
9	$('#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);