西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发javascript|JQuery → jQuery Ajax 可以防止用户重复提交的代码实现

jQuery Ajax 可以防止用户重复提交的代码实现

相关软件相关文章发表评论 来源:西西整理时间:2012/5/31 19:38:48字体大小:A-A+

作者:佚名点击:653次评论:1次标签: jQuery

  • 类型:编程辅助大小:109KB语言:中文 评分:5.0
  • 标签:
立即下载

重复提交很蛋疼,每次的解决办法是,在前端提交按钮上做功夫,我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"    
    });

 请求显示:

 

    html编辑器
    (73)html编辑器
    我们做网页的时候最难找的就是编辑器,网上找一个吧,要不是图片上传错误,就是到处都是错误,垃圾太多.大家都需要一个简单,速度快的.西西为您提供最好用的编辑器一站式下载编辑器定义编辑器指的是一类编辑制作工具,可自定义窗囗,编辑主题索引,可选择添搜索页,无任何不自由。编辑器哪个好用小编个人比较喜欢使用和,这两款编辑器软件都有不错的表现。至于编辑器哪个好用,这就要根据你的个人需求去选择对应的编辑器啦...更多>>
    dreamweaver cs6
    (14)dreamweaver cs6
    新版本使用了自适应网格版面创建页面,在发布前使用多屏幕预览审阅设计,可大大提高工作效率。改善的性能,更高效地传输大型文件。实时视图和多屏幕预览面板可呈现代码,更能够检查自己的工作。曾经风靡一时的网页三剑客成员之一是目前应用最广的网页制作软件,原本是由公司所开发的著名网站开发工具,随被收购后,改名为。它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,以及在之后推出的针对专业网页图像设计的,三者...更多>>

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(1)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)