JS Ajax请求如何防止重复提交


Posted in Javascript onJune 13, 2016

好长时间没写js代码了刚好遇到这样的问题。我们系统多数表单没有做防止重复提交的。

由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值。

所以我想在,js这边动手。其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了。思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知。

我想架构的目的之一,就在于简化业务开发,屏蔽掉业务无关的细节,让一线开发安心写业务吧。

代码如下:

/**
* Created by xiayongsheng on 2016/6/12.
*/
;(function($){
var ajax = $.ajax;
// 用于存储ajax的请求
var ajaxState = {};
var kinhomAjax = function () {
var args = Array.prototype.slice.call(arguments, 0);
// url data 一致,
// 应该将 url取出,data按键值排序,后将值拼接在一起,进行sha1得到的值作为指纹
// 累先用 url作为指纹吧
var hash = typeof args[0] === 'string'?args[0]:args[0].url;
if (typeof ajaxState[hash] !== 'undefined') {
if (ajaxState[hash] > 3) {
alert('请不要重复提交,请求正在处理中');
}
++ajaxState[hash];
return $.Deferred();
}
ajaxState[hash] = 1;
var def = ajax.apply($,args);
def.done(function () {
delete ajaxState[hash];
});
return def;
};
$.ajax = kinhomAjax;
})(jQuery);

以上所述是小编给大家介绍的JS Ajax请求如何防止重复提交的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
RequireJS使用注意细节
May 15 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
JavaScript_object基础入门(必看篇)
Jun 13 #Javascript
js 连续赋值的简单实现
Jun 13 #Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 #Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 #Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
异步传递消息系统的作用
2016/05/01 面试题
本科毕业生求职自荐信
2014/02/03 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
个人综合鉴定材料
2014/05/23 职场文书
放牛班的春天观后感
2015/06/01 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Python制作表白爱心合集
2022/01/22 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS