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


Posted in Javascript onSeptember 07, 2018

背景

前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 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 ? options.data.split('&') : [];
 compareData = function(beforD,afterD) {
 //当url相同时,以此比较保存的参数对象,若参数对象相同,则返回false,若第一个就相同,则跳出循环
 // 反之说明当前参数对象列表中没有与将要提交的参数相同,则可看为不同的请求,返回true,允许发起请求
 var result = false;
 for(var i=0;i<beforD.length;i++){
 if(beforD[i]){
  result = false;
  var beforData = beforD[i];
  for(var j=0;j<beforData.length;j++){
  if(afterD[j] !== beforData[j]){
  result = true;
  break;
  }
  }
  if (!result){
  break;
  }
 }else {
  result = true;
  continue;
 }
 }
 return result;
 };

 //若请求队列中不存在或者同一个请求不同参数,且不为html后缀,则加入队列中
 if (( !_pendingRequests[p_item.key] || compareData(_pendingRequests[p_item.key],dataArray) ) && p_item.key.indexOf('.html') === -1) {
 //给 index 赋值是因为请求是异步返回的,index用于标记第一个请求
 if(_pendingRequests[p_item.key]){
 p_item.index = _pendingRequests[p_item.key].push(dataArray)-1;
 } else{
 _pendingRequests[p_item.key] = [dataArray];
 p_item.index = 0;
 }
 } else if (p_item.key.indexOf('.html') === -1) {
 jqXHR.abort(); // 放弃后触发的重复提交,仅保留第一次提交
 //pendingRequests[key].abort(); // 放弃先触发的提交
 }
 var complete = options.complete;
 //请求完成
 options.complete = function(jqXHR, textStatus) {
 // 通过 key 和 index 获取成功返回的请求,将其值为 null ,下一次该请求便是在请求队列中便是新的一个请求
 _pendingRequests[p_item.key][p_item.index] = null;
 if ($.isFunction(complete)) {
 complete.apply(this, arguments);
 }
 };
});

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() 阻止表单提交

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
详解javascript遍历方式
Nov 11 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php读取本地json文件的实例
2018/03/07 PHP
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
学校食堂食品安全责任书
2014/07/28 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers