前端防止用户重复提交js实现代码示例
背景
前端在向后端进行数据提交的时候，通常会需要在第一次提交返回前，阻止用户在快速点击发送二次请求，即防止重复提交，最简单的方法是使用标志参数或者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){
varp_item={//保存请求请求的url
key:options.url,
index:0
},
dataArray=options.data?options.data.split('&'):[];
compareData=function(beforD,afterD){
//当url相同时，以此比较保存的参数对象，若参数对象相同，则返回false，若第一个就相同，则跳出循环
//反之说明当前参数对象列表中没有与将要提交的参数相同，则可看为不同的请求，返回true，允许发起请求
varresult=false;
for(vari=0;i
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);
}
}
});
returnthis;
};
当表单初次提交时，通过 jQuery.data()设置一个标志位，当表单重复提交时，判断设置的标志位，若是提交状态，将阻止表单的提交事件。当form.target=_blank提交后打开新界面的情况，将在800毫秒后恢复原界面表单可提交状态。
为了方便对全站的表单提交统一处理，可对需要放重复提交的表单添加一个classpreventDouble,在页面渲染后，统一加上事件监听
//扫描带有preventDouble标识的form表单
$(function(){
varf=$('.containform.preventDouble');
for(vari=0;i
小贴士
- 提交按钮需使用type='submit'，因为监听的是表单的submit事件
- 不建议多次监听submit事件，会导致放重复提交失效
- 在表单提交前通常会有些表单检验的操作，所以当校验失败的时候，可以通过event.preventDefault()阻止表单提交
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。