背景
前端在向后端进行数据提交的时候，通常会需要在第一次提交返回前，阻止用户在快速点击发送二次请求，即防止重复提交，最简单的方法是使用标志参数或者 class 元素控制，但缺点是，每个控制重复提交的地方都需要加上这个逻辑，重复性太强，且控制逻辑不统一。
目前前端使用的是http协议，所以提交方式为两种
- 异步提交，使用jQuery.ajax()
- form 表单同步提交
下面这篇文章将给大家详细介绍关于这两种方法实现的方法示例，下面话不多说了，来随着小编一起看看详细的介绍吧
异步防重复提交的方案如下
通过 jQuery 提供的 ajaxPrefilter 方法，将在请求提交之前进行过滤，仅保留第一次请求，后续的请求 abort 阻止掉，具体实现代码如下
//若请求队列中不存在或者同一个请求不同参数，且不为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);
}
};
});
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);
}
};
});
nofollow" target="_blank" href="http://api.jquery.com/jquery.ajaxprefilter/">jquery.ajaxprefilter官方文档
表单提交防重复提交的方案如下
表单的处理就稍微要麻烦点，但大致思路和异步的相同，等待第一次请求返回的同时，阻止后续触发的请求发送 首先基于jquery扩展了一个自定义的方法，如下
当表单初次提交时，通过jQuery.data() 设置一个标志位，当表单重复提交时，判断设置的标志位，若是提交状态，将阻止表单的提交事件。当form.target = _blank 提交后打开新界面的情况，将在800毫秒后恢复原界面表单可提交状态。
为了方便对全站的表单提交统一处理，可对需要放重复提交的表单添加一个class preventDouble,在页面渲染后，统一加上事件监听
小贴士
- 提交按钮需使用
type='submit'，因为监听的是表单的submit事件 - 不建议多次监听submit事件，会导致放重复提交失效
- 在表单提交前通常会有些表单检验的操作，所以当校验失败的时候，可以通过
event.preventDefault()阻止表单提交
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/30368.html