xml地图|网站地图|网站标签 [设为首页] [加入收藏]

web前端防治重复提交

来源:http://www.ccidsi.com 作者:集成经验 人气:168 发布时间:2019-11-20
摘要:web前端防治重复提交,web预防整合治理重复提交 web前端开辟中预防治理重复提交 web前端数据央求可能表单提交往往经过对dom的点击事件来操作,不过往往因为认为点击过快(少年手速

web前端防治重复提交,web预防整合治理重复提交

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央求(提交数据卡塔 尔(英语:State of Qatar)

 $.ajax({
            url: url,
            type: "post",
            data: data,
            success: function (data) {
               callback;
            }
});    

那正是说前面那么些付出和乞求在互联网和属性因素上招致不可能马上网络响应何况在事变频频响合时产生的双重,除非在付出响应实现前的点击(触发事件卡塔 尔(英语:State of Qatar)视为无效,等近期响应完了再去响应下三个伸手

万一是表单开关我们得以这么在点击后将按键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做了判别(假若这是浏览器内部机制原理卡塔 尔(英语:State of Qatar),反正在日前以此相互作用周期里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();

});

那三个代码都是二个效应提交表单,但是!!!!!!!!!!大家发现阻止表单提交的不正是在当前相互周期(三次点击-》响应-》回调卡塔 尔(英语:State of Qatar)里,将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前端数据乞求也许表单提交往往因此对dom的点击事件来操作,可是往...

本文由68399皇家赌场发布于集成经验,转载请注明出处:web前端防治重复提交

关键词: 68399皇家赌场

最火资讯