jQuery Ajax 防止重復提交

本文轉載自查看原文 2012-05-31 17:48 7011 jquery

【題記】重復提交很蛋疼，每次的解決辦法是，在前端提交按鈕上做功夫，我baidu 也google了，姿勢換了N次，貌似找不到適合自己的項目的方法，好吧，寫一個。

【正文】：先上代碼：

View Code

/* *
* jQuery Ajax 防止重復提交
* @author : suntiger035
* @data   : 2012-5-31 17:13
*/

( function($){
     var $ajax = $.ajax;
    $ajax._reuqestsCache = {};
     // 設置全局 AJAX 默認選項。
    $.ajaxSetup({
        mode: "block",
        index: 0,
        cache: false,
        beforeSend: function(xhr, s) {
             if (s.mode) {
                 if (s.mode === "abort" && s.index) {
                     if ($ajax._reuqestsCache[s.index]) {
                        $ajax._reuqestsCache[s.index].abort();
                    }
                }
                $ajax._reuqestsCache[s.index] = xhr;
            }
        }
    });

     // 這里我是重寫了getJSON方法，當然了，這名字隨便你改，別覆蓋jQuery本身的就可以了

    $.extend({
        getJSON: function(url, data, callback, options) {
            options = $.extend({}, arguments[arguments.length - 1] || {});
             if (options.mode === "block" && options.index) {
                 if ($ajax._reuqestsCache[options.index]) {
                     return false;
                }
                $ajax._reuqestsCache[options.index] = true;
            }
             if (options.crossDomain) {
                options.dataType = "jsonp";
            }
             var type = "json";
             if ($.isFunction(data)) {
                callback = data;
                data = null;
            }
            options = $.extend({
                type: "GET",
                url: url,
                data: data,
                success: callback,
                dataType: "json"
            }, options);
             return $.ajax(options);
        }
    });

    $(document).ajaxComplete( function(a,b,c){
         if (c.index) $ajax._reuqestsCache[c.index] = null;
    })

})(jQuery);

增加的參數描述

jQuery ajax原本的參數不變，增加了，index,mode,crossdomain 三個參數(jQuery 1.5增加了crossdomain，這里保留為了向后兼容)

index : 每個請求的索引，默認為0，任何值，

mode ：請求模式，有兩個值，“abort”,“block”

abort : 將之前的請求abort掉，

block : 將之后的請求abort掉。

crossdomain : true時候，為jsonp請求，跨域

方法描述$.getJSON()，用法跟原本的getJSON方法一致，只不過，我增加了一個參數，參數設置，始終是最后一個參數
說明如上。

測試代碼

<input type="button" id="btn" value="click me" />
<script type="text/javascript">

$("#btn").click( function(){

    $.getJSON('handle/try-1.php', {aa:11}, function(data){
        console.log(data);
    },{
        mode : 'block',
        index : "111111111"
    });

    $.getJSON('handle/try-1-1.php', {aa:11}, function(data){
        console.log(data);
    });

});
</script>

demo---mode : "block"

    $.getJSON('handle/try-1.php', {aa:11}, function(data){
        console.log(data);
    },{
        mode : 'block',
        index : "111111111"
    });

請求顯示：

demo---mode : "abort"

    $.getJSON('handle/try-1.php', {aa:11}, function(data){
        console.log(data);
    },{
        mode : 'abort',
        index : "111111111"
    });

請求顯示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery的$ .ajax防止重復提交的方法【javascript】利用jquery ajaxPrefilter防止ajax重復提交談談防止Ajax重復點擊提交 $.ajax防止多次點擊重復提交的方法 jQuery實現加載中效果,防止重復提交防止表單重復提交如何防止頁面重復提交 vue防止重復提交如何防止表單重復提交防止表單重復提交