`

防止表单多次请求

阅读更多

不推荐用外部变量锁定或修改按钮状态的方式,因为那样比较难:

  • 要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用;
  • 不可避免地比普通流程要要多注册一个 complete 事件;
  • 恢复状态的代码很容易和不相干的代码混合在一起;


我推荐用主动查询状态的方式(A、B,jQuery 为例)或工具函数的方式(C、D)来去除重复操作,并提供一些例子作为参考:

A. 独占提交
只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交。

module.submit = function() {
  if (this.promise_.state() === 'pending') {
    return
  }
  return this.promise_ = $.post('/api/save')
}


B. 贪婪提交
无限制的提交,但是以最后一次操作为准;亦即需要尽快给出最后一次操作的反馈,而前面的操作结果并不重要。

module.submit = function() {
  if (this.promise_.state() === 'pending') {
    this.promise_.abort()
  }
  // todo
}
分享到:
评论

相关推荐

    几种防止表单重复提交的方法

    几种防止表单重复提交的方法 禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。 我之前的文章曾说...

    防止用户将表单重复提交的方法汇总

     几种防止表单重复提交的方法  1.禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。  我之前的...

    修改禁止多次重复提交

    如何修改禁止多次重复提交

    PHP防止表单重复提交的几种常用方法汇总

    本文较为详细的汇总了PHP防止表单重复提交的几种常用方法,在PHP程序开发中有着很高的实用价值。具体方法如下: 1. 使用JS让按钮在点击一次后禁用(disable)。采用这种方法可以防止多次点击的发生,实现方式较简单...

    阻止表单提交按钮多次提交的完美解决方法

    另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交。 onclick事件里面执行 $(this).attr(‘disabled’,’disabled’); 在点击一次后立马将按钮设置为...

    JavaScript防止表单重复提交代码,指定时间内禁止重复点击.zip

    最近项目在做一个登录页的时候,为了避免用户的多次重复点击登录按钮发送请求,所以我在点击了按钮发送请求后,将设置按钮变灰并禁用,倒计时一段时间后又可重复点击,具体实现如下,有需要的小伙伴可以参考一下。

    Java怎样防止重复提交

     B/S结构的软件开发中,特别是在越大型的分布式应用中体现的越明显,后端的处理往往会因为出现较多的时间消耗而引起延迟,这种延迟有可能过长而终使用户认为是自己的操作错误,导致他们重新提交请求,由于任务的...

    常见表单重复提交问题整理及解决方法

    二、防止表单重复提交的方法 a>禁掉提交按钮。表单提交后disabled现在的按钮或者取消该按钮的点击事件或者默认事件。这种方法防止心急的用户多次点击按钮。但有个问题,如果在客户端把Javascript给禁止掉,这种方法...

    OkSimple:OkSimple:强大而简单的网络库

    支持自定义标签每次请求支持自定义CacheControl对短时间多次相同的请求进行了拦截处理,有效防止用户多次点击导致的重复请求在没有网络的情况下,可以添加强制缓存基于kotlin但也对java做了支持同步okhttp最新版本,...

    前端防止用户重复提交js实现代码示例

    前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制,但缺点是,每个控制重复提交的地方都需要加上...

    php session的锁和并发

    本文分享PHP的session在使用过程中的锁和并发的问题,与之相关的...我们的系统是基于phalcon 2.0.8 开发的,如你所见,我们在表单域加入了防止csrf攻击的域。也启用了验证码。 <input type="hidden" name="{{ se

    WEB 前端开发中防治重复提交的实现方法

    web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的...

    JSP实用技巧集合,jsp编程的一些小技巧总结

    47. 选中多条记录一次性删除? 48. 自动获取页面文件名? 49. 在JSP中调用ActiveX控件? 50. 使用SmartUpload实现文件上传? 51. 使用iReport和Jasperreport开发报表? 52. 使用iText生成PDF? 53. 制作图片水印? 54. ...

    JavaScript实战

    5.6.3 一次改变多个CSS属性 145 5.7 读取、设置和删除HTML属性 146 5.8 创意标题 147 5.9 操作选择中的每个元素 149 5.9.1 匿名函数 150 5.9.2 this和$(this) 150 5.10 自动提取引用 152 5.10.1 概览 152 5.10.2 ...

    使用AOP改善javascript代码

    1, 防止[removed]被二次覆盖. 2,无侵入的统计代码. 3, 分离表单请求和校验. 4,给ajax请求动态添加参数. 5,职责链模式. 6, 组合代替继承. 先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一...

    jsp编程技巧集锦

    选中多条记录一次性删除? 48. 自动获取页面文件名? 49. 在JSP中调用ActiveX控件? 50. 使用SmartUpload实现文件上传? 51. 使用iReport和Jasperreport开发报表? 52. 使用iText生成PDF? 53. 制作...

    spring security 参考手册中文版

    5.3 Java配置和表单登录 34 5.4授权请求 35 5.5处理注销 36 5.5.1 LogoutHandler 37 5.5.2 LogoutSuccessHandler 37 5.5.3更多注销相关参考 38 5.6认证 38 5.6.1内存认证 38 5.6.2 JDBC认证 39 5.6.3 LDAP认证 39 ...

    ExtAspNet_v2.3.2_dll

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack->AutoPostBack, Event PostBack->EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    vc++ 开发实例源码包

    3) 每个服务器为客户服务时, 通常是长期的, 会涉及多次请求-应答的来回. PcShare 内含远程控制、进程管理、文件操作、视频控制、注册表操作、客户端服务器端。 redui_src_v0.9.130(DirectUI 3D) DirectUI 3D界面库...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack->AutoPostBack, Event PostBack->EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

Global site tag (gtag.js) - Google Analytics