更多导航首页资讯中心软件下载单机游戏手机应用源码下载驱动下载

资讯教程业界新闻 互联网 硬件数码 安全资讯 游戏资讯 游戏攻略 手机相关 软件报道

软件下载网络软件 系统工具 应用软件 联络聊天 图形图像 多媒体类 手机软件 游戏娱乐

单机游戏动作射击 策略战略 角色扮演 体育竞技 冒险解密 模拟养成 棋牌益智 其它游戏

手机应用iPhoneSymbianWP7PPCJAVA

源码下载ASP源码 PHP源码 CGI源码 JSP源码 .Net源码 VC/C++ VB源码 C#源码

硬件驱动驱动下载硬件工具

您的位置:首页新闻编程开发网页制作Javascript

JS WEB前端开发如何防止重复提交的实现方法例子

来源:维维整理作者:维维时间:2016-10-26 14:48:22我要评论(0)

JS WEB前端开发如何防止重复提交的实现方法例子分享,今天给大家带来的是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();
});

这3个代码都是一个效果提交表单,不过我们发现阻止表单提交的不就是在当前交互周期(一次点击-》响应-》回调)里,将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,这是不是就更加简单呢。

[访问统计:]
上一篇:C#利用Shader实现夜幕降临倒计时效果例子分享
下一篇:Android对EditTex的图片实现监听例子代码分享

相关推荐

  • 该分类还没有添加任何内容!

相关软件

文章评论
发表评论