jQuery Ajax 可以防止用戶重復(fù)提交的代碼實現(xiàn)

Dreamweaver jQuery智能提示插件1.2.0

• 類型：編程輔助大小：109KB語言：中文 評分：5.0
• 標簽：

立即下載

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

【正文】：先上代碼：

View Code

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

(function($){
    var $ajax = $.ajax;
    $ajax._reuqestsCache = {};
    //設(shè)置全局 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);

增加的參數(shù)描述

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

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

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

            abort : 將之前的請求abort掉，

            block : 將之后的請求abort掉。

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

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

測試代碼

<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"    
    });

 請求顯示：