美文网首页
AJax 重复提交问题。

AJax 重复提交问题。

作者: Fairyin | 来源:发表于2016-08-24 17:32 被阅读202次

    最近偶然看到之前封装的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秒内同一个接口无法请求。

    相关文章

      网友评论

          本文标题:AJax 重复提交问题。

          本文链接:https://www.haomeiwen.com/subject/zqdosttx.html