JS WEB前端开发如何防止重复提交的实现方法例子分享,今天给大家带来的是JS 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();
});
这3个代码都是一个效果提交表单,不过我们发现阻止表单提交的不就是在当前交互周期(一次点击-》响应-》回调)里,将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,这是不是就更加简单呢。