JS Ajax請(qǐng)求如何防止重復(fù)提交

更新時(shí)間：2016年06月13日 09:43:53 投稿：mrr

這篇文章主要介紹了JS Ajax請(qǐng)求如何防止重復(fù)提交的相關(guān)資料，通過(guò)覆蓋掉$.ajax而達(dá)到防止重復(fù)提交的問(wèn)題，實(shí)現(xiàn)代碼簡(jiǎn)單，需要的朋友可以參考下

好長(zhǎng)時(shí)間沒(méi)寫(xiě)js代碼了剛好遇到這樣的問(wèn)題。我們系統(tǒng)多數(shù)表單沒(méi)有做防止重復(fù)提交的。

由于不想在后端這邊處理，因?yàn)榧偃缬珊蠖颂幚淼脑挘托枰陧?yè)面加載的時(shí)候給出一次性的token值，加大了開(kāi)發(fā)的工作量不說(shuō)，還容易忘記做這個(gè)，同時(shí)，ajax也不好處理，需要提交失敗的話同時(shí)返回新的token值。

所以我想在，js這邊動(dòng)手。其實(shí)以前和前端提過(guò)，久久不見(jiàn)動(dòng)靜，就只好弄塊磚丟出去了。思路是，覆蓋掉$.ajax,在這里面處理掉防止重復(fù)提交的問(wèn)題，而前端的業(yè)務(wù)開(kāi)發(fā)不受影響，不改代碼，無(wú)感知。

我想架構(gòu)的目的之一，就在于簡(jiǎn)化業(yè)務(wù)開(kāi)發(fā)，屏蔽掉業(yè)務(wù)無(wú)關(guān)的細(xì)節(jié)，讓一線開(kāi)發(fā)安心寫(xiě)業(yè)務(wù)吧。

代碼如下:

/**
* Created by xiayongsheng on 2016/6/12.
*/
;(function($){
var ajax = $.ajax;
// 用于存儲(chǔ)ajax的請(qǐng)求
var ajaxState = {};
var kinhomAjax = function () {
var args = Array.prototype.slice.call(arguments, 0);
// url data 一致，
// 應(yīng)該將 url取出，data按鍵值排序，后將值拼接在一起，進(jìn)行sha1得到的值作為指紋
// 累先用 url作為指紋吧
var hash = typeof args[0] === 'string'?args[0]:args[0].url;
if (typeof ajaxState[hash] !== 'undefined') {
if (ajaxState[hash] > 3) {
alert('請(qǐng)不要重復(fù)提交，請(qǐng)求正在處理中');
}
++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請(qǐng)求如何防止重復(fù)提交的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

老生常談JavaScript中的this關(guān)鍵字
相對(duì)于很多其他的面向?qū)ο笳Z(yǔ)言來(lái)說(shuō)，this代表的就是當(dāng)前對(duì)象。本篇文章通過(guò)實(shí)例給大家介紹js中的this關(guān)鍵字，感興趣的朋友一起看看吧
2016-10-10
JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽
這篇文章主要為大家介紹了JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽，F(xiàn)ile API將極大地方便 Web 端的文件上傳等操作，本文將介紹 File API的概況，并用兩個(gè)實(shí)例展示File API的應(yīng)用，感興趣的小伙伴們可以參考一下
2016-02-02
JS+JSP checkBox 全選具體實(shí)現(xiàn)
本文為大家介紹下使用JS+JSP實(shí)現(xiàn)checkBox全選，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2014-01-01
JavaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇JavaScript判斷用戶名和密碼不能為空的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
前端實(shí)現(xiàn)全局主題切換功能實(shí)例代碼
這篇文章主要介紹了如何使用ReactHook和Context實(shí)現(xiàn)全局主題切換的功能,通過(guò)創(chuàng)建一個(gè)Context對(duì)象和一個(gè)ThemeProvider組件,可以將當(dāng)前主題存儲(chǔ)在Context中,并提供一個(gè)切換主題的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2025-03-03
js+css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)
使用html、js、css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-12-12
JavaScript高仿支付寶倒計(jì)時(shí)頁(yè)面及代碼實(shí)現(xiàn)
在支付寶上我們經(jīng)常會(huì)見(jiàn)到支付寶倒計(jì)時(shí)功能，倒計(jì)時(shí)應(yīng)用非常廣泛，下文給大家介紹js制作支付寶倒計(jì)時(shí)功能，但是里面涉及到，倒計(jì)時(shí)，彈框，以及字體圖的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2016-10-10
HTML中不支持靜態(tài)Expando的元素的問(wèn)題
HTML中不支持靜態(tài)Expando的元素的問(wèn)題...
2007-03-03
JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法,結(jié)合實(shí)例形式分析了JS通過(guò)數(shù)組遍歷、運(yùn)算等方法實(shí)現(xiàn)去重復(fù)值的操作技巧,需要的朋友可以參考下
2017-02-02