0

我正在使用以下代码在加载时通​​过 ajax 从服务器获取内容。但在特定情况下，我有一些完全相同的链接。在这种情况下，我如何防止我的代码对同一个 url 进行多个服务器/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("");
        }
    });
});
4

3 回答 3

0

您可以使用响应缓存

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')]);
    }
});
于 2013-04-12T11:59:23.843 回答
0 
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元素添加单独的回调，并且仍然只发出一次实际请求。

于 2013-04-12T12:00:48.673 回答
0

创建一个数组来存储具有 2 个属性的对象，LinkURL并且DivID. 每当您进行 ajax 调用时，请检查该链接是否已存在于数组中，

如果它不可用：进行调用，获取结果，将条目添加到具有相应DivID.

如果该项目已经在数组中：（这意味着我们已经调用了这个 url），获取DivID该条目的 并获取该 Div 的内容。

于 2013-04-12T11:58:20.543 回答