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


Posted in Javascript onOctober 26, 2016

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 前端开发中防治重复提交的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
关于Jquery中的事件绑定总结
Oct 26 #Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 #Javascript
理解JavaScript原型链
Oct 25 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
javascript parseInt 大改造
2009/09/27 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
nohup的用法
2014/08/10 面试题
先进单位申报材料
2014/12/25 职场文书
年底个人总结范文
2015/03/10 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis