前端防止用户重复提交js实现代码示例

背景

前端在向后端进行数据提交的时候，通常会需要在第一次提交返回前，阻止用户在快速点击发送二次请求，即防止重复提交，最简单的方法是使用标志参数或者 class 元素控制，但缺点是，每个控制重复提交的地方都需要加上这个逻辑，重复性太强，且控制逻辑不统一。

目前前端使用的是http协议，所以提交方式为两种

下面这篇文章将给大家详细介绍关于这两种方法实现的方法示例，下面话不多说了，来随着小编一起看看详细的介绍吧

异步防重复提交的方案如下

通过 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); } };});