脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → web防止重复提交

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

 更新时间：2016年10月26日 09:58:53   作者：loocer  
这篇文章主要介绍了JS 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 前端开发中防治重复提交的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • javascript数组去重3种方法的性能测试与比较

    javascript数组去重3种方法的性能测试与比较

    面试题中有一题数组去重，首先想到的是对象存键值的方法可是遇到不同类型又能转换成同样的字符串的就完了接下来为大家介绍下双重循环/存键值和类型实现去重，感兴趣的各位可以参考下哈
    2013-03-03
  • 利用Blob进行文件上传的完整步骤

    利用Blob进行文件上传的完整步骤

    BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。下面这篇文章主要给大家介绍了关于利用Blob进行文件上传的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
    2018-08-08
  • 小程序实现列表倒计时功能

    小程序实现列表倒计时功能

    这篇文章主要为大家详细介绍了小程序实现列表倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript中的this关键字使用方法总结

    JavaScript中的this关键字使用方法总结

    这篇文章主要介绍了JavaScript中的this关键字使用方法总结,本文讲解了作为对象方法调用、作为函数调用、作为构造函数调用、使用 apply 或 call 调用等内容,需要的朋友可以参考下
    2015-03-03
  • getElementByIdx_x js自定义getElementById函数

    getElementByIdx_x js自定义getElementById函数

    最近看JS代码，发现不少人问getElementByIdx_x是什么函数，其实就是个getElementById自定义函数
    2012-01-01
  • jquery div模态窗口的简单实例

    jquery div模态窗口的简单实例

    下面小编就为大家带来一篇jquery div模态窗口的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js继承的实现代码

    js继承的实现代码

    学着js的继承，自己也写了个。感觉不是很好。现在很多代码都封装成类。
    2010-08-08
  • 微信小程序实现简单计算器与秒表

    微信小程序实现简单计算器与秒表

    这篇文章主要为大家详细介绍了微信小程序实现简单计算器与秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • js，jquery滚动/跳转页面到指定位置的实现思路

    js，jquery滚动/跳转页面到指定位置的实现思路

    这篇文章主要介绍了如何通过js或jquery滚动/跳转页面到指定位置,需要的朋友可以参考下
    2014-06-06
  • JS实现计算小于非负数n的素数的数量算法示例

    JS实现计算小于非负数n的素数的数量算法示例

    这篇文章主要介绍了JS实现计算小于非负数n的素数的数量算法,可实现针对一定范围内素数个数的统计功能,涉及javascript数值运算相关操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论