来自多个Ajax请求到HTML数组的HTML数据

我试图预先加载一些使用AJAX和jQuery的HTML内容。 AJAX回调函数将数据添加到关联数组中。我很好，如果我独自做每一个请求：来自多个Ajax请求到HTML数组的HTML数据

var contentArray = new Object(); 

var urlA = "includes/contentA.php"; 
var urlB = "includes/contentB.php"; 
var urlC = "includes/contentC.php"; 

$.get(urlA, function(htmlA) { 
    contentArray["A"] = htmlA; 
}); 
$.get(urlB, function(htmlB) { 
    contentArray["B"] = htmlB; 
}); 
$.get(urlC, function(htmlC) { 
    contentArray["C"] = htmlC; 
});

因为我可能有几个这样的（三个以上）的，我试图做一个for循环：

var contentArray = new Object(); 
var pages = new Object(); 

pages["A"] = "includes/contentA.php"; 
pages["B"] = "includes/contentB.php"; 
pages["C"] = "includes/contentC.php"; 

for (var key in pages) { 
    var URL = pages[key]; 
    $.get(URL, function(html) { 
     contentArray[key] = html; 
    }); 
}

但是，这不起作用。 contentArray只有一个包含html数据的属性，而不是三个。我知道jQuery，特别是AJAX的东西，所以解释和解决方案（相似或不同方法相同的结果）都很好。顺便说一句，我知道一个较大的AJAX请求比多个小的请求更可取，但我试图保持没有启用JS的用户的兼容性，并且当前的PHP包含很方便。任何有关如何满足这些要求的建议也非常受欢迎。

谢谢。

来源

2011-09-03 Sam

AJAX请求的回调函数在请求返回之前不会运行。在你的情况下，每个回调函数将使用key，因为它存在于当前上下文中，并且由于本地范围内没有key变量，它将使用距离它最近的key在for循环中。

问题是，当AJAX请求返回时，for循环已完全迭代，key等于数组中的最后一个键。因此，每个回调函数都会收到相同的key，覆盖您的contentArray中的以前的值。

如果你正在使用jQuery 1.5.1或以上的快速和肮脏的解决方案（一个不涉及改变你的PHP文件的当前结构）可能是尝试以下操作：

for (var key in pages) { 
    var URL = pages[key]; 

    $.ajax({ 
    url: URL, 
    xhrFields: { 
     'customData': key 
    }, 
    success: function(html, statusText, jqXHR) { 
     contentArray[jqXHR.customData] = html; 
    } 
    }); 
}

我没有测试过，但根据documentation page它应该工作。你所做的只是使用由jQuery创建的请求对象来将你的变量传递给回调函数。

希望有帮助

来源

2011-09-04 01:47:57 Clive

它确实有用，谢谢！我认为这可能是一个范围问题，所以定义了一个函数来执行ajax请求并将数据添加到'contentArray'。这工作，但我仍然不确定发生了什么。现在我知道了。再次，谢谢。 – Sam

来自多个Ajax请求到HTML数组的HTML数据

回答

相关问题