背景

前端在向后端進(jìn)行數(shù)據(jù)提交的時(shí)候，通常會(huì)需要在第一次提交返回前，阻止用戶在快速點(diǎn)擊發(fā)送二次請(qǐng)求，即防止重復(fù)提交，最簡(jiǎn)單的方法是使用標(biāo)志參數(shù)或者 class 元素控制，但缺點(diǎn)是，每個(gè)控制重復(fù)提交的地方都需要加上這個(gè)邏輯，重復(fù)性太強(qiáng)，且控制邏輯不統(tǒng)一。

目前前端使用的是http協(xié)議，所以提交方式為兩種

下面這篇文章將給大家詳細(xì)介紹關(guān)于這兩種方法實(shí)現(xiàn)的方法示例，下面話不多說(shuō)了，來(lái)隨著小編一起看看詳細(xì)的介紹吧

異步防重復(fù)提交的方案如下

通過(guò) jQuery 提供的 ajaxPrefilter 方法，將在請(qǐng)求提交之前進(jìn)行過(guò)濾，僅保留第一次請(qǐng)求，后續(xù)的請(qǐng)求 abort 阻止掉，具體實(shí)現(xiàn)代碼如下

/** * _pendingRequests = { * 'http:xxx.xxxx.do':['domain=P2P','xxxx=aaa'], * 'http:xxx.yyyy.do':['domain=P3P','xxxx=bbb'] * } * 該對(duì)象的 key 是請(qǐng)求的 url ，value 是由請(qǐng)求參數(shù)轉(zhuǎn)化成的字符串?dāng)?shù)組 */var _pendingRequests = {};$.ajaxPrefilter(function(options, originalOptions, jqXHR) { var p_item = { //保存請(qǐng)求請(qǐng)求的url key:options.url, index:0 }, dataArray = options.data ? options.data.split('&') : []; compareData = function(beforD,afterD) { //當(dāng)url相同時(shí)，以此比較保存的參數(shù)對(duì)象，若參數(shù)對(duì)象相同，則返回false，若第一個(gè)就相同，則跳出循環(huán) // 反之說(shuō)明當(dāng)前參數(shù)對(duì)象列表中沒(méi)有與將要提交的參數(shù)相同，則可看為不同的請(qǐng)求，返回true，允許發(fā)起請(qǐng)求 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; }; //若請(qǐng)求隊(duì)列中不存在或者同一個(gè)請(qǐng)求不同參數(shù)，且不為html后綴，則加入隊(duì)列中 if (( !_pendingRequests[p_item.key] || compareData(_pendingRequests[p_item.key],dataArray) ) && p_item.key.indexOf('.html') === -1) { //給 index 賦值是因?yàn)檎?qǐng)求是異步返回的，index用于標(biāo)記第一個(gè)請(qǐng)求 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; //請(qǐng)求完成 options.complete = function(jqXHR, textStatus) { // 通過(guò) key 和 index 獲取成功返回的請(qǐng)求，將其值為 null ，下一次該請(qǐng)求便是在請(qǐng)求隊(duì)列中便是新的一個(gè)請(qǐng)求 _pendingRequests[p_item.key][p_item.index] = null; if ($.isFunction(complete)) { complete.apply(this, arguments); } };});