<script src="js/jquery.form.js" type="text/javascript"></script>
Jquery Form Plugin是jquery最重要的插件之一，它利用AJAX技術在不引起頁面刷新的情況下POST表單。主要有兩個方法：ajaxform和 ajaxsubmit。它會自動收集表單元素內容，決定如何管理提交進程。這兩個方法支持多重選擇。我想AJAX方式的表單應用再沒有比這個插件更簡單易用的了。
先在頁面里設置一個普通的表單：
Html代碼 復制代碼
1. <form id=”myForm” action=”comment.php” method=”post”>
2. 姓名: <input type=”text” name=”name” id=”name”/>
3. 評論: <textarea name=”comment” id=”comment”></textarea>
4. <input type=”submit” value=”提交評論” />
5. </form>
6. [/html]
<form id=”myForm” action=”comment.php” method=”post”>
姓名: <input type=”text” name=”name” id=”name”/>
評論: <textarea name=”comment” id=”comment”></textarea>
<input type=”submit” value=”提交評論” />
</form>
[/html]
加載jquery庫和插件腳本庫。然后簡單地寫一段初始化腳本，這段腳本將在DOM加載完成時執行：
Html代碼 復制代碼
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加載完畢后執行
6. $(document).ready(function() {
7. // 綁定’myForm’并定義一個簡單的回調函數
8. $('#myForm').ajaxForm(function() {
9. alert(”評論提交完成!”);
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加載完畢后執行
$(document).ready(function() {
// 綁定’myForm’并定義一個簡單的回調函數
$('#myForm').ajaxForm(function() {
alert(”評論提交完成!”);
});
});
</script>
</head>
[/html]
OK，就是這么簡單。當點擊“提交評論”按鈕后，表單的數據就會POST到comment.php腳本，并且返回“評論提交完成”信息（如果提交成功）。頁面并沒有刷新，非常AJAX……
讓我們來看看這個插件還有什么強大的功能。
ajaxForm
1. 該方法須預先綁定表單，所以它一般在$(document).ready(function() { …}里定義。它能讓表單在不刷新頁面的情況下POST到目標。可以為該方法提供一個參數，參數一般是一個回調函數用于返回信息給用戶。當然如果不提供參數也行，只是表單提在無聲無息地提交后無法得到確認了。
2. 增加所有需要的事件監聽器，為AJAX提交表單做好準備。ajaxForm不能提交表單。在document的ready函數中，使用ajaxForm來為 AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既可以是一個回調函數，也可以是一個Options對象。
可鏈接（Chainable）：可以。
實例：
Js代碼 復制代碼
1. $('#myFormId').ajaxForm();
$('#myFormId').ajaxForm();
ajaxSubmit
1. 該方法是以響應事件來通用AJAX方式提交表單。比如點擊某個按鈕或改變了某個下拉框的值，在觸發事件函數里可以設置該方法。如：
Js代碼 復制代碼
1. $(”#clickme”).click(function(){
2. $(”#myForm”).ajaxSubmit();
3. });
$(”#clickme”).click(function(){
$(”#myForm”).ajaxSubmit();
});
或者這樣：
Html代碼 復制代碼
1. <select id=”mySelect” onchange=”$(‘#myForm’).ajaxSubmit();”>
<select id=”mySelect” onchange=”$(‘#myForm’).ajaxSubmit();”>
2. 馬上由AJAX來提交表單。大多數情況下，都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既可以是一個回調函數，也可以是一個Options對象。
可鏈接（Chainable）：可以。
實例：
Js代碼 復制代碼
1. // 綁定表單提交事件處理器
2. $('#myFormId').submit(function() {
3. // 提交表單
4. $(this).ajaxSubmit();
5. // 為了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false
6. return false;
7. });
// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 為了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false
return false;
});
formSerialize
1. 該方法可以表單域的名稱和值連接起來，形成一個字符串，字符串格式為name1=value1&name2=value2…比如：
Js代碼 復制代碼
1. var queryString=$(”#myForm”).formSerialize();
var queryString=$(”#myForm”).formSerialize();
變量queryString的值將為變成name=xxx&comment=xxx。得到這個字符串后，可以用$.post來提交，
如：
Js代碼 復制代碼
1. $.post(”comment.php”,queryString);
$.post(”comment.php”,queryString);
2.將表單串行化（或序列化）成一個查詢字符串。這個方法將返回以下格式的字符串：name1=value1&name2=value2。
可鏈接（Chainable）：不能， 這個方法返回一個字符串。
實例：
Js代碼 復制代碼
1. var queryString = $('#myFormId').formSerialize();
2.
3. // 現在可以使用$.get、$.post、$.ajax等來提交數據
4. $.post('myscript.php', queryString);
var queryString = $('#myFormId').formSerialize();
// 現在可以使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString);
fieldSerialize
1. 和formSerialize一樣，返回一個字符串，但返回的是表單指定元素或特定元素類型域的字符串。返回字符串格式也是一樣的。如：var queryString = $(’#myForm :text’).fieldSerialize();//返回myForm表單內所有文本框的字符串值。
2.將表單的字段元素串行化（或序列化）成一個查詢字符串。當只有部分表單字段需要進行串行化（或序列化）時，這個就方便了。這個方法將返回以下格式的字符串：name1=value1&name2=value2。
可鏈接（Chainable）：不能，這個方法返回一個字符串。
實例：
Js代碼 復制代碼
1. var queryString = $('#myFormId .specialFields').fieldSerialize();
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
1.返回一個數組，記錄表單元素的值。如果表單沒有值則對應數組值為空。如：
Js代碼 復制代碼
1. var data=$(’:text’).fieldValue();//返回所有表單中所有文本框類型的值。
var data=$(’:text’).fieldValue();//返回所有表單中所有文本框類型的值。
變量data為[”,”,”]這樣的一個數組，數組元素對應表單元素的值。事實上我們可以這樣來得到“姓名”文本框里的值：var data=$(”#name”).val();（這個元素要有ID屬性）這樣的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得單個或多個表單中特定元素域的值。比如取得所有文本框或所有復選框的值。只要加個“:”就可以。這種方法也可以用到formSerialize或fieldSerialize方法上。
Js代碼 復制代碼
1. var data=$(”#myForm :text”).fieldValue();//取得在myForm表單里所有文本框的值。
var data=$(”#myForm :text”).fieldValue();//取得在myForm表單里所有文本框的值。
2.返回匹配插入數組中的表單元素值。從0.91版起，該方法將總是以數組的形式返回數據。如果元素值被判定可能無效，則數組為空，否則它將包含一個或多于一個的元素值。
可鏈接（Chainable）：不能，該方法返回數組。
實例：
Js代碼 復制代碼
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
同樣也返回一個數組，這個數組是對象數組。對象有name和value兩個屬性，分別記錄表單中的元素名稱和元素值。如：
Js代碼 復制代碼
1. var data=$(”#myForm”).formToArray();
var data=$(”#myForm”).formToArray();
變量data得到的是一個對象數組。data[0].name保存myForm表單中第一個表單元素的名稱屬性值，這里是”name”。data[0].value保存myForm表單中第一個表單元素的值，這里就是填了什么值就是什么。
resetForm
1.該方法很簡單啦，恢復表單初始狀態。也就恢復到DOM加載完成時的表單狀態。類似“重設表單”
2.清除表單元素。該方法將所有的文本（text）輸入字段、密碼（password）輸入字段和文本區域（textarea）字段置空，清除任何select元素中的選定，以及將所有的單選（radio）按鈕和多選（checkbox）按鈕重置為非選定狀態。
可鏈接（Chainable）：可以。
Js代碼 復制代碼
1. $('#myFormId').clearForm();
$('#myFormId').clearForm();
clearFields
1.清除表單域元素。可以清除特定類型的域元素，比如清除所有文本框的，或所有復選框的域。
2.清除字段元素。只有部分表單元素需要清除時才方便使用。
可鏈接（Chainable）：可以。
Js代碼 復制代碼
1. $('#myFormId .specialFields').clearFields();
$('#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
實例：
Js代碼 復制代碼
1. // 準備好Options對象
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);
// 準備好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。