文章介绍了一种在前端JavaScript层面防止Ajax请求重复提交的方法。通过覆盖jQuery的$.ajax方法，利用请求URL作为指纹进行状态管理，限制同一请求在短时间内重复发起。该方案旨在简化后端开发，无需生成一次性Token，对现有业务代码无侵入性，实现无感知的防重提交保护。
问题背景与前端解决思路
许久未编写JS代码，近期恰好遇到此类问题。目前系统中多数表单并未实施防止重复提交的机制。
为避免后端处理带来的复杂性，如页面加载时需生成一次性Token增加开发工作量且易遗漏，同时Ajax失败后需返回新Token导致处理繁琐，决定在前端解决此问题。
此前曾与前端团队沟通此事，但未获响应，故自行实现。思路是覆盖$.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请求防止重复提交的相关知识，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！