WEB 前端开发中防治重复提交的实现方法

254 阅读 0 评论 168 点赞

我是靠谱客的博主典雅草丛，最近开发中收集的这篇文章主要介绍WEB 前端开发中防治重复提交的实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

web前端数据请求或者表单提交往往通过对dom的点击事件来操作，但是往往因为认为点击过快（少年手速挺快的嘛），或者因为响应等待使得用户误人为没操作而重复很多次点击，造成表单数据的连续重复提交，造成用户体检的不好，甚至影响到整个系统的安全性。而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦。下面就来讲讲如何有效避免前端的表单重复提交

表单提交有以下几种方式：

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>

另外，还有一种常用的方法是使用图片：

代码如下:

<form name=”form” method=”post” action=”# "> 
<input type=”image” name=”submit” src=”btnSubmit.jpg”> 
</form>

第三种是使用链接来提交表单，用到了javascript的DOM模型：

代码如下:

<form name=”form” method=”post” action=”#”> 
<a href=”javascript：form.submit();”>提交</a> 
</form>

实际上这一种是通过js 进行提交。可以理解成　

$("form").find("a").click(function(){
$("form").submit();
　　});

第一种和第二种可以用js来：

$("input[type='submit']").click(function(){
　　　　$("form").submit();
　　});
$("input[name='submit']").click(function(){
　　　　$("form").submit();
　　});

总之，都是对form进行提交,当然还有出了表单提交还有些请求也要防治重复，比如响应某个事件的ajax请求（提交数据）

$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
callback;
}
});

那么前面这些提交和请求在网络和性能因素上导致不能及时网络响应并且在事件多次响应时造成的重复，除非在提交响应完成前的点击（触发事件）视为无效，等当前响应完了再去响应下一个请求

如果是表单按钮我们可以这样在点击后将按钮disabled掉

$("input[type='submit']").click(function(){
$(this).attr("disabled",　true);
　$("form").submit();
});

按道理来说，将点击后将按钮disabled设为true时按钮就不能点击了那么第二次以后点击就无效了，但这样做你会发现同时第一次点击的表单也无法正常提交了（好像是h5的标准后才不行的，无论怎样h5标准的浏览器我试了试都不行），看来是disabled影响了表单的提交，那么先提交后disabled看行不行

$("input[type='submit']").click(function(){
　$("form").submit();
$(this).attr("disabled",　true);
});

实验结果，这样也不行，我们不能猜想submit（）回调在click函数最后执行并且.submit()函数内部应该对disabel做了判断（假设这是浏览器内部机制原理），反正在当前这个交互周期里disabled了就不能submit

那么我们可以抛开disabled用代码逻辑来防治重复

$("input[type='submit']").click(function(){
if(!$(this)[0].repeat){
$(this)[0].repeat=true;
$（"form").submit();
}
});

在当前点击的按钮如果没有repeat的话就进入提交并且设置个值为true的repeat属性，当第二次进来的时候发现有这个属性就不提交，看似这样的逻辑会防治重复提交了，但是事实永远都是残酷的！

是的，当点击过快的时候还是会重复提交，这是因为，如果click里没执行submit的时候html默认的type＝submit 的input点击操作会提交表单，举个完整的例子

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form>
$("input[type='submit']").click(function(){
console.log("here is click too!");
});
<form name=”form” method=”post” action=”#"> 
<div>提交</div> 
</form>
$("form").find("div").click(function(){
　　$("form").submit();
});

这三个代码都是一个效果提交表单，但是！！！！！！！！！！我们发现阻止表单提交的不就是在当前交互周期（一次点击－》响应－》回调）里，将submit按钮disabled掉吗，好的，少年上代码

$("form").find("div").click(function(){
if(!$(this)[0].repeat){ 
　　 $(this)[0].repeat=true;
　　$(this).closest("form").submit();
}else{
　　 $(this).attr("disabled",　true); }
});

看到没有，第二次点击的时候就disabeld掉了，所以只有第一次成功，第二次的就不会提交了！

当然，如果是其他dom元素防治重复点击那就更简单了

$("div").click(function(){
　　if(!!$(this)[0].isRepeat){
　　　　return;
　　}
$(this)[0].isRepeat=1;
　　 　$.ajax({
url: url,
type: "post",
data: data,
success: function (data) {
　　　　　　　　$(this)[0].isRepeat＝0；
　　　　　　　　callback; 
　　　　　　} 
　 }); 
});

因为submit（）会刷新试图，而ajax不会，所以在回调后需要把判断重复的那个属性赋值为false

这是不是就更简单？我想你会这样认为的！

以上所述是小编给大家介绍的JS WEB 前端开发中防治重复提交的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！