背景
前端在向后端進(jìn)行數(shù)據(jù)提交的時候往核，通常會需要在第一次提交返回前，阻止用戶在快速點(diǎn)擊發(fā)送二次請求，即防止重復(fù)提交驶兜，最簡單的方法是使用標(biāo)志參數(shù)或者 class 元素控制，但缺點(diǎn)是果元，每個控制重復(fù)提交的地方都需要加上這個邏輯促王，重復(fù)性太強(qiáng)，且控制邏輯不統(tǒng)一而晒。
目前前端使用的是http協(xié)議蝇狼，所以提交方式為兩種
- 異步提交，使用jQuery.ajax()
- form 表單同步提交
異步防重復(fù)提交的方案如下
通過 jQuery 提供的 ajaxPrefilter 方法倡怎，將在請求提交之前進(jìn)行過濾迅耘，僅保留第一次請求，后續(xù)的請求 abort 阻止掉监署，具體實(shí)現(xiàn)代碼如下
/**
* _pendingRequests = {
* 'http:xxx.xxxx.do':['domain=P2P','xxxx=aaa'],
* 'http:xxx.yyyy.do':['domain=P3P','xxxx=bbb']
* }
* 該對象的 key 是請求的 url 颤专，value 是由請求參數(shù)轉(zhuǎn)化成的字符串?dāng)?shù)組
*/
var _pendingRequests = {};
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
var p_item = { //保存請求請求的url
key:options.url,
index:0
},
dataArray = options.data ? options.data.split('&') : [];
compareData = function(beforD,afterD) {
//當(dāng)url相同時，以此比較保存的參數(shù)對象钠乏，若參數(shù)對象相同栖秕，則返回false，若第一個就相同晓避，則跳出循環(huán)
// 反之說明當(dāng)前參數(shù)對象列表中沒有與將要提交的參數(shù)相同簇捍，則可看為不同的請求只壳，返回true，允許發(fā)起請求
var result = false;
for(var i=0;i<beforD.length;i++){
if(beforD[i]){
result = false;
var beforData = beforD[i];
for(var j=0;j<beforData.length;j++){
if(afterD[j] !== beforData[j]){
result = true;
break;
}
}
if (!result){
break;
}
}else {
result = true;
continue;
}
}
return result;
};
//若請求隊(duì)列中不存在或者同一個請求不同參數(shù)暑塑，且不為html后綴吼句，則加入隊(duì)列中
if (( !_pendingRequests[p_item.key] || compareData(_pendingRequests[p_item.key],dataArray) ) && p_item.key.indexOf('.html') === -1) {
//給 index 賦值是因?yàn)檎埱笫钱惒椒祷氐模琲ndex用于標(biāo)記第一個請求
if(_pendingRequests[p_item.key]){
p_item.index = _pendingRequests[p_item.key].push(dataArray)-1;
} else{
_pendingRequests[p_item.key] = [dataArray];
p_item.index = 0;
}
} else if (p_item.key.indexOf('.html') === -1) {
jqXHR.abort(); // 放棄后觸發(fā)的重復(fù)提交事格，僅保留第一次提交
//pendingRequests[key].abort(); // 放棄先觸發(fā)的提交
}
var complete = options.complete;
//請求完成
options.complete = function(jqXHR, textStatus) {
// 通過 key 和 index 獲取成功返回的請求惕艳，將其值為 null ，下一次該請求便是在請求隊(duì)列中便是新的一個請求
_pendingRequests[p_item.key][p_item.index] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});
表單提交防重復(fù)提交的方案如下
表單的處理就稍微要麻煩點(diǎn)驹愚，但大致思路和異步的相同远搪，等待第一次請求返回的同時，阻止后續(xù)觸發(fā)的請求發(fā)送
首先基于jquery擴(kuò)展了一個自定義的方法逢捺，如下
$.fn.preventDoubleSubmission = function() {
$(this).on('submit', function(e) {
var $form = $(this);
// $form.data('submitted') 通過該變量判斷請求的狀態(tài)
if ($form.data('submitted') === true) {
//阻止請求
e.preventDefault();
} else {
$form.data('submitted', true);
if ($form.attr('target') === '_blank') {
setTimeout(function() {
$form.data('submitted', false);
}, 800);
}
}
});
return this;
};
當(dāng)表單初次提交時终娃，通過 jQuery.data() 設(shè)置一個標(biāo)志位，當(dāng)表單重復(fù)提交時蒸甜，判斷設(shè)置的標(biāo)志位棠耕，若是提交狀態(tài)，將阻止表單的提交事件柠新。當(dāng)form.target = _blank 提交后打開新界面的情況窍荧，將在800毫秒后恢復(fù)原界面表單可提交狀態(tài)。
為了方便對全站的表單提交統(tǒng)一處理恨憎，可對需要放重復(fù)提交的表單添加一個class preventDouble,在頁面渲染后蕊退，統(tǒng)一加上事件監(jiān)聽
//掃描帶有 preventDouble 標(biāo)識的form表單
$(function() {
var f = $('.contain form.preventDouble');
for (var i=0;i<f.length;i++){
$(f[i]).preventDoubleSubmission();
}
});
小貼士
提交按鈕需使用
type=’submit’，因?yàn)楸O(jiān)聽的是表單的submit事件
不建議多次監(jiān)聽submit事件憔恳，會導(dǎo)致放重復(fù)提交失效
在表單提交前通常會有些表單檢驗(yàn)的操作瓤荔，所以當(dāng)校驗(yàn)失敗的時候，可以通過event.preventDefault()阻止表單提交
