jquery表單外掛 ---form
jquery Form外掛是一個優秀的Ajax表單外掛，可以非常容易的、無侵入滴升級html表單以支援Ajax。jQUery Form有兩個核心方法——ajaxForm()和ajaxSubmit(),它們集合了從控制表單元素到如何管理提交程序的功能。另外外掛還有一些其它的方法：formToArray(),formSerialize(),fieldSerialize(),fieldValue(),clearFrom(),clearFialds()和resetForm()等。
下載地址：點選開啟連結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/jquery.form.js"></script> </head> <body> <form id="form"> <input type="file" enctype="multipart/form-data" method ="post"/> </form> <form id="form_submit"> 賬號：<input type="text" name="name"/><br/> 密碼：<input type="password" name="password"/><br/> <input type="submit" id="submit_test" value="提交"/> </form> </body> </html>
上述程式碼通過核心方法ajaxForm(),很容易將表單提升為ajax提交方式。
<script type="text/javascript">
$("#form_submit").ajaxForm(function () {
alert("登陸成功！！！");
})
</script>form外掛還有一個核心方法ajaxForm()，也能完成同樣功能。
$("#form_submit").ajaxSubmit(function () {
alert("登陸成功！！！");
})ajaxForm()方法和ajaxSubmit()方法引數
ajaxForm()方法和ajaxSubmit()方法都能接收0個或1個引數。當為單個的引數時，該引數既可以是一個回撥函式，也可以是一個 options 物件。上面就是引數是回撥函式的例子，下面介紹 options 物件。
首先定義一個物件 options，然後在物件裡設定引數。如：
var options = { target : "#output1", //把伺服器返回的內容放入 id 為 output 的元素中 beforeSubmit : showRequest, //提交前的回撥函式 success : showResponse, // 提交後的回撥函式 url : url, //預設是form的action ，如果宣告則會覆蓋 type : type , //預設是form的method，如果宣告則會覆蓋 dataType : null, //'xml'、‘script’、‘json’（接受伺服器端的返回型別） clearForm : true, //成功提交後，清除所有表單元素的值 resetForm : true, //成功提交後，重置所有表單元素的值 timeout : 3000 //限制請求時間，請求大於3秒後，跳出請求 };
定義了 options物件之後，就可以把這個 options物件傳給ajaxForm()方法。如
$("#form_submit").ajaxForm(aptions);或者傳遞給ajaxSubmit()方法。如：
$("#form_submit").ajaxSubmit(aptions);在 options 裡指定了兩個回撥函式，即beforeSubmit :showRequest 和 success：showResponse.他們分別表單提交前和提交後被呼叫。
beforeSubmit ——提交前的回撥函式
function showRequest(formData,jqForm,options){
var queryString = $.param(formData);
return true;
}這個回撥函式有3個引數。
第一個 formData 是陣列物件，使用$.param()方法把愛轉化為字串，得到如下這種格式：
name=tom&address=2
需要注意的是，當表單提交時 form 外掛會議ajax方式自動提交這些資料。
第二個引數 jqForm 是一個jquery物件 ，它封裝了表單元素。
如果要訪問 jqForm 的 DOM 元素，可以吧 jqForm 轉為 DOM 物件。
var formElement = jqForm[0];
var address = formElement.address.value;
第三個引數 options 就是 option 物件。前面已經聲明瞭 options 物件裡的一些屬性，其他沒有聲
明的，則會使用預設屬性。利用這個特性，在表單提交之前驗證資料，如果不符合驗證條件，則組織表單提交。
success——提交後的回撥函式
提交後的回撥函式：
function showResponse(responseText,statusText,xhr,$form) {
alert("狀態："+statusText+"\n 返回內容是：\n"+responseText);
}success 有四個引數：responseText、statusText、xhr、$form。其中 responseText 和 statusText 2個比較常用。
statusText 只是返回一個狀態，例如 success error鄧。
responseText 攜帶者伺服器返回的資料內容。responseText 會根據設定的 options 物件中的 dataType 屬性來返回相應格式的內容。具體情況如下：
（1）：對於預設的 HTML 返回，回掉函式的提一個引數是 XMLHttpRequest 物件的 responseText 屬性。
（2）：當 dataType 屬性設定為 xml 時，回掉函式的第一個引數是 XMLHttpRequest 物件的 responseXML 屬性。
$("#form_submit").ajaxForm({
dataType : 'xml',
success : processxml
});
function processxml(responseXML) {
var name = $('name',responseXML).text();
var address = $('address',responseXML).text();
}（3）：當 dataType 屬性設定為 json 時，回掉函式的第一個引數是 從伺服器返回的 json 資料物件。
$("#form_submit").ajaxForm({
dataType : 'json',
success : processJson
});
function processJson(data) {
$("#output1").html(data.name+" "+data.address);
}