DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS Ajax請求如何防止重復提交
JS Ajax請求如何防止重復提交
編輯:關於JavaScript     

好長時間沒寫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請求如何防止重復提交的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved