AJax 重复提交问题。

最近偶然看到之前封装的ajax公用方法,发现之前的写法里面加入了一个dom对象,在发送ajax请求之前先用jQuery的off函数取消dom对象的onClick事件,等待ajax处理完成后重新给dom对象绑定onClick事件,总觉得很怪异,所以就查了下大神们的解决方法。

$(function(){
    var _c = {};
    
    _c.ajax = function(url, method, param, onSuccess, onFailure){
        $.ajax({
            url: url,
            type: method,
            data: param,
            dataType: "json",
        })
        .done(function(data){
            onSuccess(data);
        })
        .fail(function(error){
            //过滤掉被抛弃的请求
            if (error.readyState === 0 && error.status === 0) {
                
                return false;
            }
            onFailure(JSON.parse(error.responseText));
        });
    };

    _c.requestUrl = {};

    $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
        var key = options.url;
        if (typeof(_c.requestUrl[key]) === 'undefined') {
            _c.requestUrl[key] = jqXHR;
        } else {
            //放弃当前触发的请求
            jqXHR.abort();
            //放弃之前触发的请求
            //_c.requestUrl[key].abort(); 
        }
        options.complete = function(jqXHR, textStatus) {
            delete _c.requestUrl[key];
        };
    });
});
  • jQuery.ajaxPrefilter() 函数用于**指定预先处理Ajax参数选项的回调函数。
  • 通俗的将就是ajax在发送到web服务器之前,可以调用这个方法来改变请求的内容。
  • 大致的实现方法就是将url存入一个全局变量中,请求之前检查变量中是否存在当前请求的url值,若存在则抛弃当前的请求,待相同的上一次请求处理完成后,在变量数组中删除当前的url,就可再次请求了。
  • 总结:对比之前的方法,代码量减少不少,而且也不必关注dom对象了,下一个关注点可能就是限制请求的频率了,比如说3秒内同一个接口无法请求。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 595评论 0 2
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,677评论 24 450
  • 第二十章阅读的第四个层次主题阅读 时间:2017.6.23 day20
    寻心塘阅读 184评论 0 0