一、通過Form外掛的兩個核心方法ajaxForm() 和 ajaxSubmit()，都可以在不修改表單的HTML程式碼結構的情況下，輕易地將表單的提交方式升級為Ajax提交方式。

$(function(){
	//ajaxForm() 和 ajaxSubmit()可選引數項物件options
	var options = {
		url: url,			//預設是form的action，如果在此行定義並初始化，則會覆蓋action
		type: type,			//預設是form的method="get"或"post"，如果在此行定義並初始化，則會覆蓋method
		beforeSerialize:function(){}	//序列化提交資料之前的回撥函式   
		beforeSubmit: showRequest,	//提交前執行的回撥函式
		dataType: null,			//伺服器return返回資料型別：html(預設), xml, script, json...
		target: '#jspElementId',	//把伺服器return返回的內容,放入id為jspElementId的元素中
		success: showResponse,      	//提交成功後執行的回撥函式
		error:function(){},		//提交失敗後執行的回撥函式	
		clearForm: true,		//提交成功後是否清空表單中的欄位值
		resetForm: true,		//提交成功後是否重置表單中的欄位值，即恢復到頁面載入時的狀態
		timeout: 3000			//設定請求時間，超過該時間後，自動退出請求，單位(毫秒)
	}
 
	/*--    ajaxForm()和ajaxSubmit()都可以接收0或1個引數，該引數可以是一個變數、一個物件或回撥函式。
		這兩種方法主要的區別是：
		ajaxForm()不能主動提交form，函式只是為提交表單做準備。增加所有需要的事件監聽器，為AJAX提交表單做好準備，最後以submit來觸發提交。
		而ajaxSubmit()會主動提交表單，同時可以在點選其他按鈕時也可以觸發提交，不一定是submit按鈕。--*/
	//----ajaxForm()演示
	$("#myFormId").ajaxForm(options);
	
	$('#myFormId').ajaxForm(function() {   
		$('#jspElementId').html("提交成功！歡迎下次再來！").show();    
	});  
	
	//----ajaxSubmit()演示
	$("#myFormId2").submit(funtion(){
		$(this).ajaxSubmit(options);
		return false;   //阻止表單預設提交
	});       
	$('#myFormId2').submit(function() {
		$(this).ajaxSubmit(function() {   
			$('#jspElementId').html("提交成功！歡迎下次再來！").show();    
		});
		return false;   //阻止表單預設提交
	});
});
 
//提交前執行：在這裡對錶單進行驗證，如果不符合規則，將返回false來阻止表單提交，直到符合規則為止
function showRequest(formData, jqForm, options){
	//方式一：利用formData引數。formData: 陣列物件，提交表單時，Form外掛會以Ajax方式自動提交這些資料，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
	for (var i=0; i < formData.length; i++) {
		if (!formData[i].value) {
			alert('使用者名稱,地址和自我介紹都不能為空!');
			return false;
		}
	} 
	var queryString = $.param(formData); //$.param()陣列轉字串，組裝資料，外掛會自動提交資料
	alert(queryString); //類似 ： name=1&add=2  
 
	//方式二：利用jqForm物件。jqForm:   jQuery物件，封裝了表單的元素   
	var form = jqForm[0]; //把表單轉化為dom物件
	if (!form.name.value || !form.address.value) {
		alert('使用者名稱和地址不能為空，自我介紹可以為空！');
		return false;
	}
 
	//方式三：options:  options物件
 
	//方式四：利用fieldValue()方法，fieldValue 是表單外掛的一個方法，它能找出表單中的元素的值，返回一個集合。
	var usernameValue = $('input[name=name]').fieldValue();
	var addressValue = $('input[name=address]').fieldValue();
	if (!usernameValue[0] || !addressValue[0]) {
		alert('使用者名稱和地址不能為空，自我介紹可以為空！');
		return false;
	}
 	   
	return true;  //只要不返回false，表單都會提交,在這裡可以對錶單元素進行驗證
};
 
//提交後執行
function showResponse(responseText, statusText){
	alert('狀態: ' + statusText + '\n 返回的內容是: \n' + responseText); 
	//dataType=xml
	var name = $('name', responseXML).text();
	var address = $('address', responseXML).text();
	$("#xmlout").html(name + "  " + address);
	//dataType=json
	$("#jsonout").html(data.name + "  " + data.address);
};
 

二、詳細介紹引數

ajaxForm 和 ajaxSubmit 都支援大量的可選引數，它們通過可選引數項物件options傳入。可選引數項物件只是一個簡單的 JavaScript物件，裡邊包含了一些屬性和一些值：

url
表單提交的地址。
預設值： 表單的action的值

type
表單提交的方式，'GET' 或 'POST'.
預設值： 表單的 method 的值 (如果沒有指明則認為是 'GET')

semantic
一個布林值，用來指示表單裡提交的資料的順序是否需要嚴格按照語義的順序。一般表單的資料都是按語義順序來進行序列化（或序列化）的，除非表單裡有一個type="image"元素. 所以只有當表單裡必須要求有嚴格順序並且表單裡有type="image"時才需要指定這個。
預設值： false

formSerialize
將表單序列化（或序列化）成一個查詢字串。這個方法將return返回以下格式的字串：name1=value1&name2=value2。

iframe
布林值，用來指示表單是否需要提交到一個iframe裡。 這個用在表單裡有file域要上傳檔案時。更多資訊請參考 程式碼示例 頁面裡的File Uploads 文件。
預設值： false

beforeSubmit
表單提交前執行的方法。這個可以用在表單提交前的預處理，或表單校驗。如果'beforeSubmit'指定的函式返回false，則表單不會被提交。 'beforeSubmit'函式呼叫時需要3個引數：陣列形式的表單資料，jQuery 物件形式的表單物件，可選的用來傳遞給ajaxForm/ajaxSubmit 的物件。

陣列形式的表單資料是下面這樣的格式：[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

預設值： null

dataType
指定伺服器響應返回的資料型別。其中之一: null, 'xml', 'script', 或者 'json'. 這個 dataType 選項用來指示你如何去處理server端返回的資料。 這個和 jQuery.httpData 方法直接相對應。

下面就是可以用的選項：

'xml': 如果 dataType == 'xml' 則 server 端返回的資料被當作是 XML 來處理， 這種情況下'success'指定的回撥函式會被傳進去 responseXML 資料

'json': 如果 dataType == 'json' 則server端返回的資料將會被執行，並傳進'success'回撥函式

'script': 如果 dataType == 'script' 則server端返回的資料將會在上下文的環境中被執行

預設值： null

target
用server端返回的內容更換指定的頁面元素的內容。 這個值可以用jQuery 選擇器來表示, 或者是一個jQuery 物件， 一個 DOM 元素。
預設值： null

success
當表單提交後執行的函式。 如果'success' 回撥函式被指定，當server端返回對錶單提交的響應後，這個方法就會被執行。 responseText 和 responseXML 的值會被傳進這個引數 (這個要依賴於dataType的型別).
預設值： null

clearForm
布林值，指示表單提交成功後是否需要清空。清除表單元素：該方法將所有的文字（text）輸入欄位、密碼（password）輸入欄位和文字區域（textarea）欄位置空，清除任何select元素中的選定，以及將所有的單選（radio）按鈕和多選（checkbox）按鈕重置為非選定狀態。

預設值： null

resetForm
布林值，指示表單提交成功後是否需要重置。重置：通過呼叫表單元素原有的DOM方法，將表單恢復到初始狀態。
預設值： null

三、使用方法例項

formSerialize()

var queryString = $('#myFormId').formSerialize();  
      
// 現在可以使用$.get、$.post、$.ajax等來提交資料 
$.post('myscript.php', queryString); 

fieldSerialize()
將表單的欄位元素序列化（或序列化）成一個查詢字串。當只有部分表單欄位需要進行序列化（或序列化）時，這個就方便了。這個方法將return返回以下格式的字串：name1=value1&name2=value2。

var queryString = $('#myFormId .specialFields').fieldSerialize(); 

fieldValue()
返回匹配插入陣列中的表單元素值。該方法return返回陣列。如果元素值被判定可能無效，則陣列為空，否則它將包含一個或多於一個的元素值。

var value = $('#myFormId :password').fieldValue(); // 取得密碼輸入值   
alert('The password is: ' + value[0]);  

 clearFields()

$('#myFormId .specialFields').clearFields(); 

clearForm()

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

resetForm()

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