web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性。而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦。下面就来讲讲如何有效避免前端的表单重复提交
表单提交有以下几种方式:
rush:js;">
另外,还有一种常用的方法是使用图片:
代码如下:
rush:js;">
第三种是使用链接来提交表单,用到了javascript的DOM模型:
代码如下:
实际上这一种是通过js 进行提交。可以理解成
rush:js;">
$("form").find("a").click(function(){
$("form").submit();
});
第一种和第二种可以用js来:
rush:js;">
$("input[type='submit']").click(function(){
$("form").submit();
});
$("input[name='submit']").click(function(){
$("form").submit();
});
总之,都是对form进行提交,当然还有出了表单提交还有些请求也要防治重复,比如响应某个事件的ajax请求(提交数据)
rush:js;">
$.ajax({
url: url,type: "post",data: data,success: function (data) {
callback;
}
});
那么前面这些提交和请求在网络和性能因素上导致不能及时网络响应并且在事件多次响应时造成的重复,除非在提交响应完成前的点击(触发事件)视为无效,等当前响应完了再去响应下一个请求
如果是表单按钮我们可以这样在点击后将按钮disabled掉
rush:js;">
$("input[type='submit']").click(function(){
$(this).attr("
disabled", true);
$("form").submit();
});
按道理来说,将点击后将按钮disabled设为true时按钮就不能点击了那么第二次以后点击就无效了,但这样做你会发现同时第一次点击的表单也无法正常提交了(好像是h5的标准后才不行的,无论怎样h5标准的浏览器我试了试都不行),看来是disabled影响了表单的提交,那么先提交后disabled看行不行
rush:js;">
$("input[type='submit']").click(function(){
$("form").submit();
$(this).attr("
disabled", true);
});
实验结果 ,这样也不行,我们不能猜想submit()回调在click函数最后执行并且.submit()函数内部应该对disabel做了判断(假设这是浏览器内部机制原理),反正在当前这个交互周期里disabled了就不能submit
那么我们可以抛开disabled用代码逻辑来防治重复
rush:js;">
$("input[type='submit']").click(function(){
if(!$(this)[0].repeat){
$(this)[0].repeat=true;
$("form").submit();
}
});
在当前点击的按钮如果没有repeat的话就进入提交并且设置个值为true的repeat属性,当第二次进来的时候发现有这个属性就不提交,看似这样的逻辑会防治重复提交了,但是事实永远都是残酷的!
是的,当点击过快的时候还是会重复提交,这是因为,如果click里没执行submit的时候html默认的type=submit 的input点击操作会提交表单,举个完整的例子
rush:js;">
$("form").find("div").click(function(){
$("form").submit();
});
rush:js;">
$("div").click(function(){
if(!!$(this)[0].isRepeat){
return;
}
$(this)[0].isRepeat=1;
$.ajax({
url: url,success: function (data) {
$(this)[0].isRepeat=0;
callback;
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。