Question

我正在使用以下代码通过ajax on load从服务器获取内容。但在特定情况下，我有一些完全相同的链接。在这种情况下，我如何阻止我的代码对同一个URL进行多个server / ajax调用，但是替换不同的div。

jQuery('.js-ajaxfill').each(function(i){
    var _this = jQuery(this);
    jQuery.ajax({
        url: _this.data('href'),
        success: function( data ) {
            _this.children('div').replaceWith(data);
        },
        error   : function(jqXHR, textStatus, errorThrown){
            _this.html("");
        }
    });
});

Answer 1

创建一个数组来存储具有2个属性LinkURL和DivID的对象。无论何时进行ajax调用，都要检查数组中是否已存在该链接，

如果不可用：拨打电话，获取结果，将条目添加到与DivID对应的数组中。

如果该项目已在数组中 :(这意味着我们已经调用了此网址），请获取该条目的DivID并获取该Div的内容。

Answer 2

您可以使用响应缓存

var ResponseCache = {};
jQuery('.js-ajaxfill').each(function(i){
    var _this = jQuery(this);
    if(!ResponseCache[_this.data('href')]){
        jQuery.ajax({
            url: _this.data('href'),
            success: function( data ) {
                 ResponseCache[_this.data('href')]=data;
                _this.children('div').replaceWith(data);
            },
            error   : function(jqXHR, textStatus, errorThrown){
                _this.html("");
            }
        });
    }else{
        _this.children('div').replaceWith(ResponseCache[_this.data('href')]);
    }
});

Answer 3

var ajaxfillRequests = {};

jQuery('.js-ajaxfill').each(function () {
    var _this = jQuery(this),
        url = _this.data('href');

    // make a new request only if none has been made to this URL, save the XHR
    if (!(url in ajaxfillRequests)) {
        ajaxfillRequests[url] = jQuery.get(url);
    }

    // add one set of callbacks per processed item to the XHR object
    ajaxfillRequests[url]
        .done(function (data) {
            _this.children('div').replaceWith(data);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            _this.html("");
        });
});

这是因为jQuery XHR对象的设计方式。它们是promises，这意味着您可以根据需要添加任意数量的回调。这也意味着你可以随时添加回调，没有必要在实际.ajax()调用的选项中添加回调。

一旦履行了这样的承诺（即请求成功）或拒绝（即HTTP请求失败），就会调用所有适当的回调。

这意味着您可以为您拥有的每个.js-ajaxfill元素添加单独的回调，但仍然只会生成一次实际请求。

防止多个ajax调用

3 个答案: