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. php emoji处理微信表情

    使用 https://github.com/iamcal/php-emoji 添加下面的函数到代码中 function utf8_bytes($cp){ if ($cp > 0x10000){ ...

  2. Python:线程

    Python中创建线程有两种方式:函数或者用类来创建线程对象. 函数式:调用 _thread 模块中的start_new_thread()函数来产生新线程. 类:创建threading.Thread的 ...

  3. 使用guava进行对字符串的加锁

    java的synchronized关键字是堆某对象加锁,但是我们当需要对某个字符串加锁怎么办 比如对同一个订单只能有一个操作,但是对其他订单的操作不影响 使用 guava包下的 Interner 类 ...

  4. Codeforces 703B (模拟) Mishka and trip

    题目:这里 题意:n个城市,每个城市有个魅力值vi,首先,有n条路将这n个城市连成一个环,1号城市连2号城市,2号连3号****n号连1号城市,每条路的魅力值是其连接的两个城市 的魅力值的乘积,这n个 ...

  5. 分享自制的13套 JQuery Mobile 界面主题(追加4套新款)

    15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...

  6. Nginx配置proxy_pass

    nginx配置proxy_pass,需要注意转发的路径配置 1.location /test/ { proxy_pass http://t6:8300; } 2.location /test/ { p ...

  7. 【如何快速的开发一个完整的iOS直播app】(播放篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...

  8. Codeforces 738D. Sea Battle 模拟

    D. Sea Battle time limit per test: 1 second memory limit per test :256 megabytes input: standard inp ...

  9. PHP的运行机制与原理(底层) [转]

    说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来处理请求.文件流.错误处理等相关操作:Zend引擎(ZE)用以将源文件转换成机器语 ...

  10. 关于SharePoint 2010中不能使用AjaxControlToolkit的解决办法

    因为项目中有一个需求需要使用calendar控件,而且样式要和Reporting Service中的尽量一致,搜索了很久发现还是微软的AjaxControlToolkit提供的CalendarExte ...