前端防止用戶重復提交js實現代碼示例

2024-05-06 16:45:59

字體：大中小

來源：轉載

供稿：網友

背景

前端在向后端進行數據提交的時候，通常會需要在第一次提交返回前，阻止用戶在快速點擊發送二次請求，即防止重復提交，最簡單的方法是使用標志參數或者 class 元素控制，但缺點是，每個控制重復提交的地方都需要加上這個邏輯，重復性太強，且控制邏輯不統一。

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

異步提交，使用jQuery.ajax()
form 表單同步提交

下面這篇文章將給大家詳細介紹關于這兩種方法實現的方法示例，下面話不多說了，來隨著小編一起看看詳細的介紹吧

異步防重復提交的方案如下

通過 jQuery 提供的 ajaxPrefilter 方法，將在請求提交之前進行過濾，僅保留第一次請求，后續的請求 abort 阻止掉，具體實現代碼如下

/** * _pendingRequests = { * 'http:xxx.xxxx.do':['domain=P2P','xxxx=aaa'], * 'http:xxx.yyyy.do':['domain=P3P','xxxx=bbb'] * } * 該對象的 key 是請求的 url ，value 是由請求參數轉化成的字符串數組 */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) { //當url相同時，以此比較保存的參數對象，若參數對象相同，則返回false，若第一個就相同，則跳出循環 // 反之說明當前參數對象列表中沒有與將要提交的參數相同，則可看為不同的請求，返回true，允許發起請求 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; }; //若請求隊列中不存在或者同一個請求不同參數，且不為html后綴，則加入隊列中 if (( !_pendingRequests[p_item.key] || compareData(_pendingRequests[p_item.key],dataArray) ) && p_item.key.indexOf('.html') === -1) { //給 index 賦值是因為請求是異步返回的，index用于標記第一個請求 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(); // 放棄后觸發的重復提交，僅保留第一次提交 //pendingRequests[key].abort(); // 放棄先觸發的提交 } var complete = options.complete; //請求完成 options.complete = function(jqXHR, textStatus) { // 通過 key 和 index 獲取成功返回的請求，將其值為 null ，下一次該請求便是在請求隊列中便是新的一個請求 _pendingRequests[p_item.key][p_item.index] = null; if ($.isFunction(complete)) { complete.apply(this, arguments); } };});

jquery.ajaxprefilter官方文檔

表單提交防重復提交的方案如下

表單的處理就稍微要麻煩點，但大致思路和異步的相同，等待第一次請求返回的同時，阻止后續觸發的請求發送
首先基于jquery擴展了一個自定義的方法，如下

$.fn.preventDoubleSubmission = function() { $(this).on('submit', function(e) { var $form = $(this); // $form.data('submitted') 通過該變量判斷請求的狀態 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;};

當表單初次提交時，通過 jQuery.data() 設置一個標志位，當表單重復提交時，判斷設置的標志位，若是提交狀態，將阻止表單的提交事件。當form.target = _blank 提交后打開新界面的情況，將在800毫秒后恢復原界面表單可提交狀態。

為了方便對全站的表單提交統一處理，可對需要放重復提交的表單添加一個class preventDouble,在頁面渲染后，統一加上事件監聽

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

小貼士