JS Ajax請求如何防止重復提交
更新時間：2016年06月13日 09:43:53 投稿：mrr
這篇文章主要介紹了JS Ajax請求如何防止重復提交的相關資料，通過覆蓋掉$.ajax而達到防止重復提交的問題，實現(xiàn)代碼簡單，需要的朋友可以參考下
好長時間沒寫js代碼了剛好遇到這樣的問題。我們系統(tǒng)多數(shù)表單沒有做防止重復提交的。
由于不想在后端這邊處理，因為假如由后端處理的話，就需要在頁面加載的時候給出一次性的token值，加大了開發(fā)的工作量不說，還容易忘記做這個，同時，ajax也不好處理，需要提交失敗的話同時返回新的token值。
所以我想在，js這邊動手。其實以前和前端提過，久久不見動靜，就只好弄塊磚丟出去了。思路是，覆蓋掉$.ajax,在這里面處理掉防止重復提交的問題，而前端的業(yè)務開發(fā)不受影響，不改代碼，無感知。
我想架構的目的之一，就在于簡化業(yè)務開發(fā)，屏蔽掉業(yè)務無關的細節(jié)，讓一線開發(fā)安心寫業(yè)務吧。
代碼如下:
/**
* 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請求如何防止重復提交的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
相對于很多其他的面向對象語言來說，this代表的就是當前對象。本篇文章通過實例給大家介紹js中的this關鍵字，感興趣的朋友一起看看吧2016-10-10
JavaScript File API實現(xiàn)文件上傳預覽
這篇文章主要為大家介紹了JavaScript File API實現(xiàn)文件上傳預覽，F(xiàn)ile API將極大地方便 Web 端的文件上傳等操作，本文將介紹 File API的概況，并用兩個實例展示File API的應用，感興趣的小伙伴們可以參考一下2016-02-02
本文為大家介紹下使用JS+JSP實現(xiàn)checkBox全選，下面有個不錯的示例，感興趣的朋友可以參考下2014-01-01
JavaScript判斷用戶名和密碼不能為空的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫avaScript判斷用戶名和密碼不能為空的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
javascript設計模式 – 簡單工廠模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 簡單工廠模式,結合實例形式分析了javascript簡單工廠模式基本概念、原理、定義、應用場景及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了如何使用ReactHook和Context實現(xiàn)全局主題切換的功能,通過創(chuàng)建一個Context對象和一個ThemeProvider組件,可以將當前主題存儲在Context中,并提供一個切換主題的方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2025-03-03
使用html、js、css實現(xiàn)的簡單易用兼容好的分頁，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
JavaScript高仿支付寶倒計時頁面及代碼實現(xiàn)
在支付寶上我們經(jīng)常會見到支付寶倒計時功能，倒計時應用非常廣泛，下文給大家介紹js制作支付寶倒計時功能，但是里面涉及到，倒計時，彈框，以及字體圖的相關知識，感興趣的朋友一起看看吧2016-10-10
HTML中不支持靜態(tài)Expando的元素的問題...2007-03-03
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重復值的方法,結合實例形式分析了JS通過數(shù)組遍歷、運算等方法實現(xiàn)去重復值的操作技巧,需要的朋友可以參考下2017-02-02