1.      背景

最近在工作中，需要實現網頁端圖片上傳到FTP伺服器的功能。上傳檔案是用Form表單提交資料的方法向後臺傳輸檔案流，在此遇到了一個問題：後臺在處理完圖片上傳功能後，需要向前臺回傳是否上傳成功的狀態碼、上傳失敗的錯誤資訊和上傳成功後的圖片URL。但是，用普通Form表單提交的話，沒有辦法實現回撥函式。後來在小夥伴的介紹下，發現可以用ajaxSubmit()方法來實現此功能。

2.      ajaxSubmit()方法簡介

（1）ajaxSubmit()依賴

ajaxSubmit()方法是JQuery Form表單外掛中的方法，要想使用該外掛，可以直接去官網http://jquery.malsup.com/form/下載。使用時，需要在jsp或者html頁面上，引入JQuery庫和Form外掛。

（2）ajaxSubmit()用法簡介

ajaxSubmit()方法接受0個或者1個引數，當為單個引數時，該引數既可以是一個回撥函式，也可以是一個options物件。回撥函式比較簡單，下面主要介紹一下options的用法。options物件可以設定的引數如下：

var options = {
		target: ‘#output1’, 		//把伺服器返回的內容放入id為output1的元素中
		beforeSubmit: showRequest,		//提交前的回撥函式
		success: showResponse,			//提交後的回撥函式
		url: url,			//預設是form的action，如果宣告，則會覆蓋
		type: type,		//預設是form的method，如果宣告，則會覆蓋
		dataType: json	,	//接受服務端返回的型別
		clearForm: true,	//成功提交後，清除所有表單元素的值
		resetForm: true,	//成功提交後，重置所有表單元素的值
		timeout: 3000		//限制請求的時間，當請求大於3秒後，跳出請求
}；
 

這些引數裡，比較常用的就是提交前的回撥函式beforeSubmit和提交後的回撥函式success。beforeSubmit主要是用來提交表單前，校驗資料的。示例程式碼：

function validate(formData, jqForm, options) {
		/*
		在這裡需要對錶單元素進行驗證，如果不符合規則，
		直接返回false來阻止表單提交。
		*/
		var queryString = $.param(formData);		//組裝資料
		return true;
}

這個回撥函式有三個引數，formData是陣列物件，jqForm是一個JQuery物件，它封裝了表單的元素，options引數就是options物件。在這個回撥函式中，只要不返回false，表單都將被允許提交；如果返回false，則會阻止表單提交。

success是提交後的回撥函式，有4個引數responseText，statusText，xhr，和$form。其中，比較常用的是前兩個。statusText只是一個返回狀態，例如success，error等。responseText攜帶著伺服器返回的資料內容，它會根據設定的options物件中的dataType屬性來返回相應格式的內容。

3.      ajaxSubmit()方法程式碼示例

下面是ajaxSubmit()方法使用的一個模板。

$(function(){	
		var options = { 
			type: 'POST',
			url: '提交路徑',
	        success:showResponse,  
	        dataType: 'json',
			error : function(xhr, status, err) {			
				alert("操作失敗");
			}
	    }; 
	    $("##Form名稱").submit(function(){ 
	        $(this).ajaxSubmit(options); 
	        return false;   //防止表單自動提交
	    });
});

/**
 * 儲存操作
 */
function toSave(){ 
	$("#Form名稱").submit();
}

/**
 * 儲存後，執行回撥
 * @param responseText
 * @param statusText
 * @param xhr
 * @param $form
 */
function showResponse(responseText, statusText, xhr, $form){ 	
	if(responseText.status == "0"){
		/**
		* 請求成功後的操作
		*/
		alert(responseText.msg);
	} else {
		alert(responseText.msg);
	}	
}