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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
json跟xml的对比分析
Jun 10 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
php 生成文字png图片的代码
2011/04/17 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python编写简单爬虫资料汇总
2016/03/22 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
《鸟的天堂》教学反思
2014/02/27 职场文书
应聘教师求职信
2014/07/19 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
婚前协议书范本
2014/10/27 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
解析MySQL索引的作用
2022/03/03 MySQL