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 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
浅析javascript的return语句
Dec 15 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python实现linux下抓包并存库功能
2018/07/18 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
this关键字的含义
2015/04/08 面试题
如何开发一个JQuery插件
2016/07/28 面试题
售后主管岗位职责
2013/12/08 职场文书
成立公司计划书
2014/05/07 职场文书
财政局长个人总结
2015/03/04 职场文书
导游词之上海豫园
2019/10/24 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript