利用AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能

1.      背景

最近在工作中，需要實(shí)現(xiàn)網(wǎng)頁(yè)端圖片上傳到FTP服務(wù)器的功能。上傳文件是用Form表單提交數(shù)據(jù)的方法向后臺(tái)傳輸文件流，在此遇到了一個(gè)問(wèn)題：后臺(tái)在處理完圖片上傳功能后，需要向前臺(tái)回傳是否上傳成功的狀態(tài)碼、上傳失敗的錯(cuò)誤信息和上傳成功后的圖片URL。但是，用普通Form表單提交的話，沒(méi)有辦法實(shí)現(xiàn)回調(diào)函數(shù)。后來(lái)在小伙伴的介紹下，發(fā)現(xiàn)可以用ajaxSubmit()方法來(lái)實(shí)現(xiàn)此功能。

2.      ajaxSubmit()方法簡(jiǎn)介

（1）ajaxSubmit()依賴

ajaxSubmit()方法是JQuery Form表單插件中的方法，要想使用該插件，可以直接去官網(wǎng)http://jquery.malsup.com/form/下載。使用時(shí)，需要在jsp或者h(yuǎn)tml頁(yè)面上，引入JQuery庫(kù)和Form插件。

（2）ajaxSubmit()用法簡(jiǎn)介

ajaxSubmit()方法接受0個(gè)或者1個(gè)參數(shù)，當(dāng)為單個(gè)參數(shù)時(shí)，該參數(shù)既可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)options對(duì)象。回調(diào)函數(shù)比較簡(jiǎn)單，下面主要介紹一下options的用法。options對(duì)象可以設(shè)置的參數(shù)如下：

var options = { 
 target: ‘#output1', //把服務(wù)器返回的內(nèi)容放入id為output1的元素中 
 beforeSubmit: showRequest, //提交前的回調(diào)函數(shù) 
 success: showResponse, //提交后的回調(diào)函數(shù) 
 url: url, //默認(rèn)是form的action，如果聲明，則會(huì)覆蓋 
 type: type, //默認(rèn)是form的method，如果聲明，則會(huì)覆蓋 
 dataType: json , //接受服務(wù)端返回的類型 
 clearForm: true, //成功提交后，清除所有表單元素的值 
 resetForm: true, //成功提交后，重置所有表單元素的值 
 timeout: 3000 //限制請(qǐng)求的時(shí)間，當(dāng)請(qǐng)求大于3秒后，跳出請(qǐng)求 
}； 

這些參數(shù)里，比較常用的就是提交前的回調(diào)函數(shù)beforeSubmit和提交后的回調(diào)函數(shù)success。beforeSubmit主要是用來(lái)提交表單前，校驗(yàn)數(shù)據(jù)的。示例代碼：

function validate(formData, jqForm, options) { 
 /* 
 在這里需要對(duì)表單元素進(jìn)行驗(yàn)證，如果不符合規(guī)則， 
 直接返回false來(lái)阻止表單提交。 
 */ 
 var queryString = $.param(formData); //組裝數(shù)據(jù) 
 return true; 
} 

這個(gè)回調(diào)函數(shù)有三個(gè)參數(shù)，formData是數(shù)組對(duì)象，jqForm是一個(gè)JQuery對(duì)象，它封裝了表單的元素，options參數(shù)就是options對(duì)象。在這個(gè)回調(diào)函數(shù)中，只要不返回false，表單都將被允許提交；如果返回false，則會(huì)阻止表單提交。

success是提交后的回調(diào)函數(shù)，有4個(gè)參數(shù)responseText，statusText，xhr，和$form。其中，比較常用的是前兩個(gè)。statusText只是一個(gè)返回狀態(tài)，例如success，error等。responseText攜帶著服務(wù)器返回的數(shù)據(jù)內(nèi)容，它會(huì)根據(jù)設(shè)置的options對(duì)象中的dataType屬性來(lái)返回相應(yīng)格式的內(nèi)容。

3.      ajaxSubmit()方法代碼示例

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

$(function(){ 
 var options = { 
 type: 'POST', 
 url: '提交路徑', 
 success:showResponse, 
 dataType: 'json', 
 error : function(xhr, status, err) { 
 alert("操作失敗"); 
 } 
 }; 
 $("##Form名稱").submit(function(){ 
 $(this).ajaxSubmit(options); 
 return false; //防止表單自動(dòng)提交 
 }); 
}); 
/** 
 * 保存操作 
 */ 
function toSave(){ 
 $("#Form名稱").submit(); 
} 
/** 
 * 保存后，執(zhí)行回調(diào) 
 * @param responseText 
 * @param statusText 
 * @param xhr 
 * @param $form 
 */ 
function showResponse(responseText, statusText, xhr, $form){ 
 if(responseText.status == "0"){ 
 /** 
 * 請(qǐng)求成功后的操作 
 */ 
 alert(responseText.msg); 
 } else { 
 alert(responseText.msg); 
 } 
} 

總結(jié)

以上所述是小編給大家介紹的利用AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com