1. 背景
最近在工作中，需要實現(xiàn)網(wǎng)頁端圖片上傳到FTP服務(wù)器的功能。上傳文件是用Form表單提交數(shù)據(jù)的方法向后臺傳輸文件流，在此遇到了一個問題：后臺在處理完圖片上傳功能后，需要向前臺回傳是否上傳成功的狀態(tài)碼、上傳失敗的錯誤信息和上傳成功后的圖片URL。但是，用普通Form表單提交的話，沒有辦法實現(xiàn)回調(diào)函數(shù)。后來在小伙伴的介紹下，發(fā)現(xiàn)可以用ajaxSubmit()方法來實現(xiàn)此功能。
2. ajaxSubmit()方法簡介
（1）ajaxSubmit()依賴
ajaxSubmit()方法是JQuery Form表單插件中的方法，要想使用該插件，可以直接去官網(wǎng)http://jquery.malsup.com/form/下載。使用時，需要在jsp或者html頁面上，引入JQuery庫和Form插件。
（2）ajaxSubmit()用法簡介
ajaxSubmit()方法接受0個或者1個參數(shù)，當(dāng)為單個參數(shù)時，該參數(shù)既可以是一個回調(diào)函數(shù)，也可以是一個options對象。回調(diào)函數(shù)比較簡單，下面主要介紹一下options的用法。options對象可以設(shè)置的參數(shù)如下：
var options = { target: ‘#output1', //把服務(wù)器返回的內(nèi)容放入id為output1的元素中 beforeSubmit: showRequest, //提交前的回調(diào)函數(shù) success: showResponse, //提交后的回調(diào)函數(shù) url: url, //默認是form的action，如果聲明，則會覆蓋 type: type, //默認是form的method，如果聲明，則會覆蓋 dataType: json , //接受服務(wù)端返回的類型 clearForm: true, //成功提交后，清除所有表單元素的值 resetForm: true, //成功提交后，重置所有表單元素的值 timeout: 3000 //限制請求的時間，當(dāng)請求大于3秒后，跳出請求 }； 這些參數(shù)里，比較常用的就是提交前的回調(diào)函數(shù)beforeSubmit和提交后的回調(diào)函數(shù)success。beforeSubmit主要是用來提交表單前，校驗數(shù)據(jù)的。示例代碼：
function validate(formData, jqForm, options) { /* 在這里需要對表單元素進行驗證，如果不符合規(guī)則， 直接返回false來阻止表單提交。 */ var queryString = $.param(formData); //組裝數(shù)據(jù) return true; } 這個回調(diào)函數(shù)有三個參數(shù)，formData是數(shù)組對象，jqForm是一個JQuery對象，它封裝了表單的元素，options參數(shù)就是options對象。在這個回調(diào)函數(shù)中，只要不返回false，表單都將被允許提交；如果返回false，則會阻止表單提交。
success是提交后的回調(diào)函數(shù)，有4個參數(shù)responseText，statusText，xhr，和$form。其中，比較常用的是前兩個。statusText只是一個返回狀態(tài)，例如success，error等。responseText攜帶著服務(wù)器返回的數(shù)據(jù)內(nèi)容，它會根據(jù)設(shè)置的options對象中的dataType屬性來返回相應(yīng)格式的內(nèi)容。
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(); } /** * 保存后，執(zhí)行回調(diào) * @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); } } 總結(jié)
以上所述是小編給大家介紹的利用AjaxSubmit()方法實現(xiàn)Form提交表單后回調(diào)功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
圖片精選
