前端防止用戶重復(fù)提交js實(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);
 }
 };
});

$.fn.preventDoubleSubmission = function() {
 $(this).on('submit', function(e) {
 var $form = $(this);
 // $form.data('submitted') 通過(guò)該變量判斷請(qǐng)求的狀態(tài)
 if ($form.data('submitted') === true) {
 //阻止請(qǐng)求
 e.preventDefault();
 } else {
 $form.data('submitted', true);
 if ($form.attr('target') === '_blank') {
 setTimeout(function() {
  $form.data('submitted', false);
 }, 800);
 }
 }
 });
 return this;
};

//掃描帶有 preventDouble 標(biāo)識(shí)的form表單
$(function() {
 var f = $('.contain form.preventDouble');
 for (var i=0;i<f.length;i++){
 $(f[i]).preventDoubleSubmission();
 }
});