<script src="js/jquery.form.js" type="text/javascript"></script>
Jquery Form Plugin是jquery最重要的插件之一，它利用AJAX技術(shù)在不引起頁(yè)面刷新的情況下POST表單。主要有兩個(gè)方法：ajaxform和 ajaxsubmit。它會(huì)自動(dòng)收集表單元素內(nèi)容，決定如何管理提交進(jìn)程。這兩個(gè)方法支持多重選擇。我想AJAX方式的表單應(yīng)用再?zèng)]有比這個(gè)插件更簡(jiǎn)單易用的了。
先在頁(yè)面里設(shè)置一個(gè)普通的表單：
Html代碼 復(fù)制代碼
1. <form id=”myForm” action=”comment.php” method=”post”>
2. 姓名: <input type=”text” name=”name” id=”name”/>
3. 評(píng)論: <textarea name=”comment” id=”comment”></textarea>
4. <input type=”submit” value=”提交評(píng)論” />
5. </form>
6. [/html]
<form id=”myForm” action=”comment.php” method=”post”>
姓名: <input type=”text” name=”name” id=”name”/>
評(píng)論: <textarea name=”comment” id=”comment”></textarea>
<input type=”submit” value=”提交評(píng)論” />
</form>
[/html]
加載jquery庫(kù)和插件腳本庫(kù)。然后簡(jiǎn)單地寫(xiě)一段初始化腳本，這段腳本將在DOM加載完成時(shí)執(zhí)行：
Html代碼 復(fù)制代碼
1. <head>
2. <script type=”text/javascript” src=”jquery.js”></script> //加載jquery
3. <script type=”text/javascript” src=”form.js”></script> //加載插件
4. <script type=”text/javascript”>
5. // DOM加載完畢后執(zhí)行
6. $(document).ready(function() {
7. // 綁定’myForm’并定義一個(gè)簡(jiǎn)單的回調(diào)函數(shù)
8. $('#myForm').ajaxForm(function() {
9. alert(”評(píng)論提交完成!”);
10. });
11. });
12. </script>
13. </head>
14. [/html]
<head>
<script type=”text/javascript” src=”jquery.js”></script> //加載jquery
<script type=”text/javascript” src=”form.js”></script> //加載插件
<script type=”text/javascript”>
// DOM加載完畢后執(zhí)行
$(document).ready(function() {
// 綁定’myForm’并定義一個(gè)簡(jiǎn)單的回調(diào)函數(shù)
$('#myForm').ajaxForm(function() {
alert(”評(píng)論提交完成!”);
});
});
</script>
</head>
[/html]
OK，就是這么簡(jiǎn)單。當(dāng)點(diǎn)擊“提交評(píng)論”按鈕后，表單的數(shù)據(jù)就會(huì)POST到comment.php腳本，并且返回“評(píng)論提交完成”信息（如果提交成功）。頁(yè)面并沒(méi)有刷新，非常AJAX……
讓我們來(lái)看看這個(gè)插件還有什么強(qiáng)大的功能。
ajaxForm
1. 該方法須預(yù)先綁定表單，所以它一般在$(document).ready(function() { …}里定義。它能讓表單在不刷新頁(yè)面的情況下POST到目標(biāo)。可以為該方法提供一個(gè)參數(shù)，參數(shù)一般是一個(gè)回調(diào)函數(shù)用于返回信息給用戶。當(dāng)然如果不提供參數(shù)也行，只是表單提在無(wú)聲無(wú)息地提交后無(wú)法得到確認(rèn)了。
2. 增加所有需要的事件監(jiān)聽(tīng)器，為AJAX提交表單做好準(zhǔn)備。ajaxForm不能提交表單。在document的ready函數(shù)中，使用ajaxForm來(lái)為 AJAX提交表單進(jìn)行準(zhǔn)備。ajaxForm接受0個(gè)或1個(gè)參數(shù)。這個(gè)單個(gè)的參數(shù)既可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)Options對(duì)象。
可鏈接（Chainable）：可以。
實(shí)例：
Js代碼 復(fù)制代碼
1. $('#myFormId').ajaxForm();
$('#myFormId').ajaxForm();
ajaxSubmit
1. 該方法是以響應(yīng)事件來(lái)通用AJAX方式提交表單。比如點(diǎn)擊某個(gè)按鈕或改變了某個(gè)下拉框的值，在觸發(fā)事件函數(shù)里可以設(shè)置該方法。如：
Js代碼 復(fù)制代碼
1. $(”#clickme”).click(function(){
2. $(”#myForm”).ajaxSubmit();
3. });
$(”#clickme”).click(function(){
$(”#myForm”).ajaxSubmit();
});
或者這樣：
Html代碼 復(fù)制代碼
1. <select id=”mySelect” onchange=”$('#myForm’).ajaxSubmit();”>
<select id=”mySelect” onchange=”$('#myForm’).ajaxSubmit();”>
2. 馬上由AJAX來(lái)提交表單。大多數(shù)情況下，都是調(diào)用ajaxSubmit來(lái)對(duì)用戶提交表單進(jìn)行響應(yīng)。ajaxSubmit接受0個(gè)或1個(gè)參數(shù)。這個(gè)單個(gè)的參數(shù)既可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)Options對(duì)象。
可鏈接（Chainable）：可以。
實(shí)例：
Js代碼 復(fù)制代碼
1. // 綁定表單提交事件處理器
2. $('#myFormId').submit(function() {
3. // 提交表單
4. $(this).ajaxSubmit();
5. // 為了防止普通瀏覽器進(jìn)行表單提交和產(chǎn)生頁(yè)面導(dǎo)航（防止頁(yè)面刷新？）返回false
6. return false;
7. });
// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 為了防止普通瀏覽器進(jìn)行表單提交和產(chǎn)生頁(yè)面導(dǎo)航（防止頁(yè)面刷新？）返回false
return false;
});
formSerialize
1. 該方法可以表單域的名稱(chēng)和值連接起來(lái)，形成一個(gè)字符串，字符串格式為name1=value1&name2=value2…比如：
Js代碼 復(fù)制代碼
1. var queryString=$(”#myForm”).formSerialize();
var queryString=$(”#myForm”).formSerialize();
變量queryString的值將為變成name=xxx&comment=xxx。得到這個(gè)字符串后，可以用$.post來(lái)提交，
如：
Js代碼 復(fù)制代碼
1. $.post(”comment.php”,queryString);
$.post(”comment.php”,queryString);
2.將表單串行化（或序列化）成一個(gè)查詢字符串。這個(gè)方法將返回以下格式的字符串：name1=value1&name2=value2。
可鏈接（Chainable）：不能， 這個(gè)方法返回一個(gè)字符串。
實(shí)例：
Js代碼 復(fù)制代碼
1. var queryString = $('#myFormId').formSerialize();
2.
3. // 現(xiàn)在可以使用$.get、$.post、$.ajax等來(lái)提交數(shù)據(jù)
4. $.post('myscript.php', queryString);
var queryString = $('#myFormId').formSerialize();
// 現(xiàn)在可以使用$.get、$.post、$.ajax等來(lái)提交數(shù)據(jù)
$.post('myscript.php', queryString);
fieldSerialize
1. 和formSerialize一樣，返回一個(gè)字符串，但返回的是表單指定元素或特定元素類(lèi)型域的字符串。返回字符串格式也是一樣的。如：var queryString = $(’#myForm :text’).fieldSerialize();//返回myForm表單內(nèi)所有文本框的字符串值。
2.將表單的字段元素串行化（或序列化）成一個(gè)查詢字符串。當(dāng)只有部分表單字段需要進(jìn)行串行化（或序列化）時(shí)，這個(gè)就方便了。這個(gè)方法將返回以下格式的字符串：name1=value1&name2=value2。
可鏈接（Chainable）：不能，這個(gè)方法返回一個(gè)字符串。
實(shí)例：
Js代碼 復(fù)制代碼
1. var queryString = $('#myFormId .specialFields').fieldSerialize();
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
1.返回一個(gè)數(shù)組，記錄表單元素的值。如果表單沒(méi)有值則對(duì)應(yīng)數(shù)組值為空。如：
Js代碼 復(fù)制代碼
1. var data=$(’:text’).fieldValue();//返回所有表單中所有文本框類(lèi)型的值。
var data=$(’:text’).fieldValue();//返回所有表單中所有文本框類(lèi)型的值。
變量data為[”,”,”]這樣的一個(gè)數(shù)組，數(shù)組元素對(duì)應(yīng)表單元素的值。事實(shí)上我們可以這樣來(lái)得到“姓名”文本框里的值：var data=$(”#name”).val();（這個(gè)元素要有ID屬性）這樣的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得單個(gè)或多個(gè)表單中特定元素域的值。比如取得所有文本框或所有復(fù)選框的值。只要加個(gè)“:”就可以。這種方法也可以用到formSerialize或fieldSerialize方法上。
Js代碼 復(fù)制代碼
1. var data=$(”#myForm :text”).fieldValue();//取得在myForm表單里所有文本框的值。
var data=$(”#myForm :text”).fieldValue();//取得在myForm表單里所有文本框的值。
2.返回匹配插入數(shù)組中的表單元素值。從0.91版起，該方法將總是以數(shù)組的形式返回?cái)?shù)據(jù)。如果元素值被判定可能無(wú)效，則數(shù)組為空，否則它將包含一個(gè)或多于一個(gè)的元素值。
可鏈接（Chainable）：不能，該方法返回?cái)?shù)組。
實(shí)例：
Js代碼 復(fù)制代碼
1. // 取得密碼輸入值
2. var value = $('#myFormId :password').fieldValue();
3. alert('The password is: ' + value[0]);
// 取得密碼輸入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
formToArray
同樣也返回一個(gè)數(shù)組，這個(gè)數(shù)組是對(duì)象數(shù)組。對(duì)象有name和value兩個(gè)屬性，分別記錄表單中的元素名稱(chēng)和元素值。如：
Js代碼 復(fù)制代碼
1. var data=$(”#myForm”).formToArray();
var data=$(”#myForm”).formToArray();
變量data得到的是一個(gè)對(duì)象數(shù)組。data[0].name保存myForm表單中第一個(gè)表單元素的名稱(chēng)屬性值，這里是”name”。data[0].value保存myForm表單中第一個(gè)表單元素的值，這里就是填了什么值就是什么。
resetForm
1.該方法很簡(jiǎn)單啦，恢復(fù)表單初始狀態(tài)。也就恢復(fù)到DOM加載完成時(shí)的表單狀態(tài)。類(lèi)似“重設(shè)表單”
2.清除表單元素。該方法將所有的文本（text）輸入字段、密碼（password）輸入字段和文本區(qū)域（textarea）字段置空，清除任何select元素中的選定，以及將所有的單選（radio）按鈕和多選（checkbox）按鈕重置為非選定狀態(tài)。
可鏈接（Chainable）：可以。
Js代碼 復(fù)制代碼
1. $('#myFormId').clearForm();
$('#myFormId').clearForm();
clearFields
1.清除表單域元素?？梢郧宄囟?lèi)型的域元素，比如清除所有文本框的，或所有復(fù)選框的域。
2.清除字段元素。只有部分表單元素需要清除時(shí)才方便使用。
可鏈接（Chainable）：可以。
Js代碼 復(fù)制代碼
1. $('#myFormId .specialFields').clearFields();
$('#myFormId .specialFields').clearFields();
Options對(duì)象
ajaxForm和ajaxSubmit都支持眾多的選項(xiàng)參數(shù)，這些選項(xiàng)參數(shù)可以使用一個(gè)Options對(duì)象來(lái)提供。Options只是一個(gè)JavaScript對(duì)象，它包含了如下一些屬性與值的集合：
target
指明頁(yè)面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè)jQuery選擇器字符串，一個(gè)jQuery對(duì)象，或者一個(gè)DOM元素。
默認(rèn)值：null。
url
指定提交表單數(shù)據(jù)的URL。
默認(rèn)值：表單的action屬性值
type
指定提交表單數(shù)據(jù)的方法（method）：“GET”或“POST”。
默認(rèn)值：表單的method屬性值（如果沒(méi)有找到默認(rèn)為“GET”）。
beforeSubmit
表 單提交前被調(diào)用的回調(diào)函數(shù)?！癰eforeSubmit”回調(diào)函數(shù)作為一個(gè)鉤子（hook），被提供來(lái)運(yùn)行預(yù)提交邏輯或者校驗(yàn)表單數(shù)據(jù)。如果 “beforeSubmit”回調(diào)函數(shù)返回false，那么表單將不被提交。“beforeSubmit”回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù)：數(shù)組形式的表單數(shù)據(jù)， jQuery表單對(duì)象，以及傳入ajaxForm/ajaxSubmit中的Options對(duì)象。表單數(shù)組接受以下方式的數(shù)據(jù)：
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默認(rèn)值：null
success
表單成功提交后調(diào)用的回調(diào)函數(shù)。如果提供“success”回調(diào)函數(shù)，當(dāng)從服務(wù)器返回響應(yīng)后它被調(diào)用。然后由dataType選項(xiàng)值決定傳回responseText還是responseXML的值。
默認(rèn)值：null
dataType
期望返回的數(shù)據(jù)類(lèi)型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法，它規(guī)定了怎樣處理服務(wù)器的響應(yīng)。這個(gè)被直接地反映到j(luò)Query.httpData方法中去。下面的值被支持：
'xml'：如果dataType == 'xml'，將把服務(wù)器響應(yīng)作為XML來(lái)對(duì)待。同時(shí)，如果“success”回調(diào)方法被指定， 將傳回responseXML值。
'json'：如果dataType == 'json'， 服務(wù)器響應(yīng)將被求值，并傳遞到“success”回調(diào)方法，如果它被指定的話。
'script'：如果dataType == 'script'， 服務(wù)器響應(yīng)將求值成純文本。
默認(rèn)值：null（服務(wù)器返回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".
布 爾標(biāo)志，表示數(shù)據(jù)是否必須嚴(yán)格按照語(yǔ)義順序（slower？）來(lái)進(jìn)行提交。注意：一般來(lái)說(shuō)，表單已經(jīng)按照語(yǔ)義順序來(lái)進(jìn)行了串行化（或序列化），除了 type="image"的input元素。如果你的服務(wù)器有嚴(yán)格的語(yǔ)義要求，以及表單中包含有一個(gè)type="image"的input元素，就應(yīng)該將 semantic設(shè)置為true。（譯注：這一段由于無(wú)法理解，翻譯出來(lái)可能語(yǔ)不達(dá)意，但請(qǐng)達(dá)人指正。）
默認(rèn)值：false
resetForm
布爾標(biāo)志，表示如果表單提交成功是否進(jìn)行重置。
Default value: null
clearForm
布爾標(biāo)志，表示如果表單提交成功是否清除表單數(shù)據(jù)。
默認(rèn)值：null
實(shí)例：
Js代碼 復(fù)制代碼
1. // 準(zhǔn)備好Options對(duì)象
2. var options = {
3. target: '#divToUpdate',
4. url: 'comment.php',
5. success: function() {
6. alert('Thanks for your comment!');
7. } };
8.
9. // 將options傳給ajaxForm
10. $('#myForm').ajaxForm(options);
// 準(zhǔn)備好Options對(duì)象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// 將options傳給ajaxForm
$('#myForm').ajaxForm(options);
注意：Options對(duì)象還可以用來(lái)將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options，你可以利用它們來(lái)將Options對(duì)象傳遞給ajaxForm和ajaxSubmit。
