js ajax請求防止重複提交

好長時間沒寫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);