铁雪资源网 Design By www.gsvan.com
背景
前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制,但缺点是,每个控制重复提交的地方都需要加上这个逻辑,重复性太强,且控制逻辑不统一。
目前前端使用的是http协议,所以提交方式为两种
- 异步提交,使用jQuery.ajax()
- form 表单同步提交
下面这篇文章将给大家详细介绍关于这两种方法实现的方法示例,下面话不多说了,来随着小编一起看看详细的介绍吧
异步防重复提交的方案如下
通过 jQuery 提供的 ajaxPrefilter 方法,将在请求提交之前进行过滤,仅保留第一次请求,后续的请求 abort 阻止掉,具体实现代码如下
/** * _pendingRequests = { * 'http:xxx.xxxx.do':['domain=P2P','xxxx=aaa'], * 'http:xxx.yyyy.do':['domain=P3P','xxxx=bbb'] * } * 该对象的 key 是请求的 url ,value 是由请求参数转化成的字符串数组 */ var _pendingRequests = {}; $.ajaxPrefilter(function(options, originalOptions, jqXHR) { var p_item = { //保存请求请求的url key:options.url, index:0 }, dataArray = options.data "external nofollow" target="_blank" href="http://api.jquery.com/jquery.ajaxprefilter/">jquery.ajaxprefilter官方文档
表单提交防重复提交的方案如下
表单的处理就稍微要麻烦点,但大致思路和异步的相同,等待第一次请求返回的同时,阻止后续触发的请求发送
首先基于jquery扩展了一个自定义的方法,如下
$.fn.preventDoubleSubmission = function() { $(this).on('submit', function(e) { var $form = $(this); // $form.data('submitted') 通过该变量判断请求的状态 if ($form.data('submitted') === true) { //阻止请求 e.preventDefault(); } else { $form.data('submitted', true); if ($form.attr('target') === '_blank') { setTimeout(function() { $form.data('submitted', false); }, 800); } } }); return this; };当表单初次提交时,通过
jQuery.data()
设置一个标志位,当表单重复提交时,判断设置的标志位,若是提交状态,将阻止表单的提交事件。当form.target = _blank
提交后打开新界面的情况,将在800毫秒后恢复原界面表单可提交状态。
为了方便对全站的表单提交统一处理,可对需要放重复提交的表单添加一个class preventDouble,在页面渲染后,统一加上事件监听
//扫描带有 preventDouble 标识的form表单 $(function() { var f = $('.contain form.preventDouble'); for (var i=0;i<f.length;i++){ $(f[i]).preventDoubleSubmission(); } });小贴士
- 提交按钮需使用
type='submit'
,因为监听的是表单的submit事件 - 不建议多次监听submit事件,会导致放重复提交失效
- 在表单提交前通常会有些表单检验的操作,所以当校验失败的时候,可以通过
event.preventDefault()
阻止表单提交
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无前端防止用户重复提交js实现代码示例的评论...