js ajax請求防止重復提交

Dionysus_go 發布于2019-08-21 10:53 / 2222人閱讀

摘要：我們系統多數表單沒有做防止重復提交的。思路是，覆蓋掉在這里面處理掉防止重復提交的問題，而前端的業務開發不受影響，不改代碼，無感知。

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

云服務器 GPU云服務器防止重復提交重復提交請求防止form重復提交 asp防止重復提交

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86353.html

Web項目如何防止客戶端重復發送請求

摘要：在項目中，有一些請求或操作會對數據產生影響比如新增刪除更新，針對這類請求一般都需要做一些保護，以防止用戶有意或無意的重復發起這樣的請求導致的數據錯亂。本文總結了一些防止客戶端重復發送請求的方法。在Web項目中，有一些請求或操作會對數據產生影響（比如新增、刪除、更新），針對這類請求一般都需要做一些保護，以防止用戶有意或無意的重復發起這樣的請求導致的數據錯亂。本文總結了一些防止客戶端重...

fireflow 2019-08-21 11:42 評論0 收藏0
Web項目如何防止客戶端重復發送請求

摘要：在項目中，有一些請求或操作會對數據產生影響比如新增刪除更新，針對這類請求一般都需要做一些保護，以防止用戶有意或無意的重復發起這樣的請求導致的數據錯亂。本文總結了一些防止客戶端重復發送請求的方法。在Web項目中，有一些請求或操作會對數據產生影響（比如新增、刪除、更新），針對這類請求一般都需要做一些保護，以防止用戶有意或無意的重復發起這樣的請求導致的數據錯亂。本文總結了一些防止客戶端重...

sewerganger 2019-08-16 12:06 評論0 收藏0
Web前端經典面試試題（三）

摘要：包含基于和標準的表示使用進行動態顯示和交互使用與服務器進行異步通信使用綁定一切。重定向表示要完成請求，需要進一步操作。方法可將一個函數的對象上下文從初始的上下文改變為由指定的新對象。一. 什么是Ajax？？？術語Ajax用來描述一組技術，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。 Ajax它是Asynchronous JavaScript + XML的簡寫定義Ajax： ...

DrizzleX 2019-08-02 11:49 評論0 收藏0
Web前端經典面試試題（三）

摘要：包含基于和標準的表示使用進行動態顯示和交互使用與服務器進行異步通信使用綁定一切。重定向表示要完成請求，需要進一步操作。方法可將一個函數的對象上下文從初始的上下文改變為由指定的新對象。一. 什么是Ajax？？？術語Ajax用來描述一組技術，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。 Ajax它是Asynchronous JavaScript + XML的簡寫定義Ajax： ...

JackJiang 2019-08-29 17:05 評論0 收藏0
Web前端經典面試試題（三）

摘要：包含基于和標準的表示使用進行動態顯示和交互使用與服務器進行異步通信使用綁定一切。重定向表示要完成請求，需要進一步操作。方法可將一個函數的對象上下文從初始的上下文改變為由指定的新對象。一. 什么是Ajax？？？術語Ajax用來描述一組技術，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。 Ajax它是Asynchronous JavaScript + XML的簡寫定義Ajax： ...

HtmlCssJs 2019-08-23 12:32 評論0 收藏0