澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

web前端预防治理重复提交

web前端开荒中预防治理重复提交

web前端数据央求也许表单提交往往通过对dom的点击事件来操作,但是往往因为感到点击过快(少年手速挺快的呗),也许因为响应等待使得客商误人为没操作而再一次很数次点击,变成表单数据的连年重复提交,变成顾客体格检查的倒霉,以致影响到全方位种类的安全性。而前面二个的预防治理重复提交起码很管用的防治了人工正常操作下的众多不要求麻烦。上边就来讲讲哪些有效幸免前端的表单重复提交

表单提交有以下二种办法:

<form name=”form” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form> 

web前端预防治理重复提交。此外,还会有风度翩翩种常用的点子是选取图片: 

代码如下:

<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前端,转载请注明出处:web前端预防治理重复提交

相关阅读