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();
});
这三个代码都是一个效果提交表单，但是！！！！！！！！！！我们发现阻止表单提交的不就是在当前交互周期（一次点击－》响应－》回调）里，将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 前端开发中防治重复提交的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于ECharts数据可视化基本使用之常用图表类型的相关资料,echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下2023-11-11
值得分享和收藏的xmlplus组件学习教程,xmlplus是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目，感兴趣的小伙伴们可以参考一下2017-05-05
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
这篇文章主要介绍了 Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题,需要的朋友可以参考下2017-02-02
本篇文章我们研究一下，在移动端开发过程中经常使用到的图片上传功能，在大多数小程序或者APP中都会遇到一些实名认证或者头像上传的功能，对uniapp小程序 上传图片功能感兴趣的朋友跟随小编一起看看吧2023-01-01
这篇文章主要介绍了Js中将Long转换成日期格式的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
本文主要介绍了React+Typescript实现倒计时Hook的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了微信小程序实现课程选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
用cookie保存用户名，记录登录状态，如何正确判断该机用户cookie是否存在呢？下面有个不错的方法，大家可以参考下2014-01-01
下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。2009-07-07
最新评论