前端防止用户重复提交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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详谈for循环里面的break和continue语句
2017/07/20 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
python3生成随机数实例
2014/10/20 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
企业承诺书怎么写
2014/05/24 职场文书
离职报告范文
2014/11/04 职场文书
电影建国大业观后感
2015/06/01 职场文书
董事会决议范本
2015/07/01 职场文书
2015元旦感言
2015/12/09 职场文书