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

这是不是就更简单?我想你会这样认为的!

web前端防治重复提交的更多相关文章

  1. 防止Web表单重复提交的方法总结

    在Web开发中,对于处理表单重复提交是经常要面对的事情.那么,存在哪些场景会导致表单重复提交呢?表单重复提交会带来什么问题?有哪些方法可以避免表单重复提交? 表单重复提交的场景 1.场景一:服务端未能 ...

  2. Web前端——表单提交和Js添加选项

    表单 表单提交 表单提交之后会将表单的数据以get或post方式,传送到action要打开的页面 方式1: 使用提交按钮 <form action="" method=&qu ...

  3. web开发,关于jsp的常见问题,重复提交,防止后退。

    看了网上的,有几种方法:1 在你的表单页里HEAD区加入这段代码: <META HTTP-EQUIV="pragma" CONTENT="no-cache" ...

  4. API接口重复提交

    重复提交的几种情况1.利用JavaScript防止表单重复提交 按钮禁用2.利用Session令牌防止表单重复提交 具体的做法:在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时 ...

  5. SP避免Form重复提交的三种方案

    SP避免Form重复提交的三种方案  1) javascript ,设置一个变量,只允许提交一次.   <script language="javascript">  ...

  6. java 防止表单重复提交(serlvet)

    java 防止表单重复提交 ---------FormServlet.java-------------- protected void doGet(HttpServletRequest reques ...

  7. php防止post数据刷新重复刷新。后退 等重复提交?

    目前测试最好的办法:同步令牌(Token)机制来解决Web应用中重复提交的问题.还在研究中,稍后带来

  8. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  9. 防CSRF攻击:一场由重复提交的问题引发的前端后端测试口水战

    重复提交,这是一直以来都会存在的问题,当在网站某个接口调用缓慢的时候就会有可能引起表单重复提交的问题,不论form提交,还是ajax提交都会有这样的问题,最近在某社交app上看到这么一幕,这个团队没有 ...

随机推荐

  1. JavaScript Dom基础

    一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...

  2. [原创][LaTex]汇总博文

    0. 简介 为了查找方便,当当当当,灵机一动的设计了这个博文,有了他就能快速的查找一些该话题相关方面的一些博文了,不管是原创.转载.整理,只要是属于我自己整理的LaTex知识,应该都可以在这里找到的. ...

  3. VMware Workstation+Linux+Xshell+Xftp+MySQL+SQLyog 配置

    这些天在搞这些个东西做项目,配置较繁,这里记下安装过程中的要点. 1.VMware Workstation 主要是 NAT 方式联网的问题,详述如下,来自网络. NAT 配置那里注意网关,虚拟机中网关 ...

  4. Oracle重启 error: ora-01034:oracle not available ora-27101:shared memory realm does not exist

    error: ora-01034:oracle not available ora-27101:shared memory realm does not exist 苦咖啡 他的博客中一篇文章完美的解 ...

  5. 转载:Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  6. Android开发学习笔记:浅谈显示Intent和隐式Intent

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/655132 ...

  7. iOS.DistributionApp.0-build-adhoc-distribution-for-tester

    Build adhoc distribution for tester 1. 提供App测试包 1.1 提供测试包的步骤 Ref[8] A: 注册所有的测试设备 B: 将App进行归档 C: 用ad ...

  8. OOP之C#设计及其UML(反向工程)

    现在总结一下C#类关键字(virtual.abstract.override.new.sealed)的使用(以C#代码体现),并再次熟悉一下OOP思想,使用UML工具EA(Enterprise Arc ...

  9. 解决mac升级后,出现的 xcrun: error: invalid active developer path, missing xcrun 错误

    最近升级了mac系统,然后接着写代码就出问题了. 报错信息如下: xcrun: error: invalid active developer path (/Library/Developer/Com ...

  10. 关闭ctrl+shift+d截图

    关闭ctrl+shift+d截图,最近用sublime text3的时候,用ctrl+shift+d,总是跳出来截图,找了半天,原来是百度浏览器的截图功能快捷键是ctrl+shift+d, 关掉即可