jQuery Form插件是一個優秀的Ajax表單插件，我們可以非常容易的使用它處理表單控件的值，清空和復位表單控件，附件上傳，以及完成Ajax表單提交。jQuery Form有兩個核心方法ajaxForm()和ajaxSubmit()，本文我們重點介紹ajaxSubmit()的應用。
HTML
首先我們載入jquery庫和jquery.form.js插件。jquery.form.js插件的官網地址：http://www.malsup.com/jquery/form/
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="jquery.form.min.js"></script>
然後，我們在頁面的body中加入一個簡單的表單代碼：
<formid="my_form"action="submit.php"method="post">
<p>姓名：<inputtype="text"name="uname"id="uname"class="input"></p>
<p>性別：<inputtype="radio"name="sex"value="1" checked> 男 <inputtype="radio"
name="sex"value="2"> 女 </p>
<p>年齡：<inputtype="text"name="age"id="age"class="input"style="width:50px"></p>
<pstyle="margin-left:30px"><inputtype="submit"class="btn"value="提交">
<spanid="msg"></span></p>
</form>
<divid="output"></div>
表單中，要求輸入姓名、性別和年齡，然後提交到submit.php處理，通常情況下，點擊“提交”按鈕後，頁面會轉到submit.php處理表單數據，而我們使用jquery.form插件後，頁面並不會跳轉，直接完成了一個ajax交互。
jQuery
我們很方便的調用jquery.form插件，利用ajaxSubmit()使得整個表單的ajax提交過程變得非常的簡單。
$(function(){
var options = {
beforeSubmit: showRequest, //提交前處理
success: showResponse, //處理完成
resetForm: true,
dataType: 'json'
};
$('#my_form').submit(function() {
$(this).ajaxSubmit(options);
});
});
function showRequest(formData, jqForm, options) {
var uname = $("#uname").val();
if(uname==""){
$("#msg").html("姓名不能爲空！");
return false;
}
var age = $("#age").val();
if(age==""){
$("#msg").html("年齡不能爲空！");
return false;
}
$("#msg").html("正在提交...");
return true;
}
function showResponse(responseText, statusText) {
$("#msg").html('提交成功');
var sex = responseText.sex==1?"男":"女";
$("#output").html("姓名："+responseText.uname+" 性別："+sex+" 年齡："+responseText.age);
}
以上代碼完成了表單提交前的驗證以及提交後的處理。表單數據提交到submit.php後，我們可以根據實際情況通過submit.php檢測數據、將數據寫入數據庫，返回操作結果等等操作，本文不再列出代碼。
ajaxSubmit()選項設置
ajaxSubmit()提供了豐富的選項設置，我們根據使用的可能性大小進行列表，以供參考。
| 屬性 | 描述 |
| url | Ajax請求將要提交到該url，默認是表單的action屬性值 |
| type | 指定提交表單數據的方法（method）：“GET”或“POST”。默認值：表單的method屬性值（如果沒有找到默認爲“GET”）。 |
| dataType | 期望返回的數據類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法，它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，將把服務器響應作爲XML來對待。同時，如果“success”回調方法被指定， 將傳回responseXML值。 'json'：如果dataType == 'json'， 服務器響應將被求值，並傳遞到“success”回調方法，如果它被指定的話。。 'script'：如果dataType == 'script'， 服務器響應將求值成純文本。。 默認值：null（服務器返回responseText值） |
| target | 指明頁面中由服務器響應進行更新的元素。元素的值可能被指定爲一個jQuery選擇器字符串，一個jQuery對象，或者一個DOM元素。 默認值：null。 |
| beforeSubmit | 表單提交前被調用的回調函數。“beforeSubmit”回調函數作爲一個鉤子（hook），被提供來運行預提交邏輯或者校驗表單數據。如果“beforeSubmit”回調函數返回false，那麼表單將不被提交。“beforeSubmit”回調函數帶三個調用參數：數組形式的表單數據，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。 默認值：null |
| success | 表單成功提交後調用的回調函數。如果提供“success”回調函數，當從服務器返回響應後它被調用。然後由dataType選項值決定傳回responseText還是responseXML的值。 默認值：null |
| clearForm | 表示如果表單提交成功是否清除表單數據。默認值：null |
| resetForm | 表示如果表單提交成功是否進行重置。默認值: null |
jquery.form插件還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我們可以使用表單驗證插件和jquery.form插件一起使用，效果更好。