jQuery是經(jīng)常使用的一個開源js框架，其中的$.ajax請求中有一個beforeSend方法，用于在向服務器發(fā)送請求前執(zhí)行一些動作。
$.ajax({
beforeSend:function(){
// handle the beforeSend event
},
complete:function(){
// handle the complete event
}
});
防止重復數(shù)據(jù)
在實際項目開發(fā)中，提交表單時常常由于網(wǎng)絡或者其原因，用戶點擊提交按鈕誤認為自己沒有操作成功，進而會重復提交按鈕操作次數(shù)，如果頁面前端代碼沒有做一些相應的處理，通常會導致多條同樣的數(shù)據(jù)插入數(shù)據(jù)庫，導致臟數(shù)據(jù)的增加。要避免這種現(xiàn)象，在$.ajax請求中的beforeSend方法中把提交按鈕禁用掉，等到Ajax請求執(zhí)行完畢，在恢復按鈕的可用狀態(tài)。
舉個例子：
$.ajax({
type:"post",
data:studentInfo,
contentType:"application/json",
url:"/Home/Submit",
beforeSend:function(){
//禁用按鈕防止重復提交
$("#submit).attr({disabled:"disabled"});
},
success:function(data){
if(data=="Success"){
// 清空輸入框
clearBox();
}
},
complete:function(){
$("#submit").removeAttr("disabled");
},
error:function(data){
consloe.info("error:"+data.responseText);
}
});
模擬Toast效果
ajax請求服務器加載數(shù)據(jù)列表時提示loading(“加載中，請稍后...”)
$.ajax({
type:"post",
contentType:"application/json",
url:"/Home/GetList",
beforeSend: function(){
$("loading").show();
},
success: function(data){
if (data=="Success"){
// ...
}
},
error: function(){
console.info("error:"+data.responseText);
}
});
以上這篇淺析巧用Ajax的beforeSend提高用戶體驗就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
