1. 背景
最近在工作中,需要實(shí)現(xiàn)網(wǎng)頁端圖片上傳到FTP服務(wù)器的功能。上傳文件是用Form表單提交數(shù)據(jù)的方法向后臺(tái)傳輸文件流,在此遇到了一個(gè)問題:后臺(tái)在處理完圖片上傳功能后,需要向前臺(tái)回傳是否上傳成功的狀態(tài)碼、上傳失敗的錯(cuò)誤信息和上傳成功后的圖片URL。但是,用普通Form表單提交的話,沒有辦法實(shí)現(xiàn)回調(diào)函數(shù)。后來在小伙伴的介紹下,發(fā)現(xiàn)可以用ajaxSubmit()方法來實(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頁面上,引入JQuery庫和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主要是用來提交表單前,校驗(yàn)數(shù)據(jù)的。示例代碼:
function validate(formData, jqForm, options) {
/*
在這里需要對(duì)表單元素進(jìn)行驗(yàn)證,如果不符合規(guī)則,
直接返回false來阻止表單提交。
*/
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屬性來返回相應(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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
您可能感興趣的文章:- 淺談layui 綁定form submit提交表單的注意事項(xiàng)
- BootStrap表單驗(yàn)證中的非Submit類型按鈕點(diǎn)擊時(shí)觸發(fā)驗(yàn)證的坑
- 微信小程序bindinput與bindsubmit的區(qū)別實(shí)例分析
- 解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效問題
- JavaScript在form表單中使用button按鈕實(shí)現(xiàn)submit提交方法
- Nodejs下用submit提交表單提示cannot post錯(cuò)誤的解決方法
- JS button按鈕實(shí)現(xiàn)submit按鈕提交效果
- 通過代碼示例了解submit與execute的區(qū)別