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

Question

我正在尝试使用 AJAX 和 jQuery 预加载一些 html 内容。 AJAX 回调函数将数据添加到关联数组中。如果我单独执行每个请求，我很好：

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 请求比多个较小的 AJAX 请求更好，但我试图为未启用 JS 的用户保留兼容性，并且当前的 php include 很方便。关于如何满足这两个要求的任何建议也非常受欢迎。

谢谢。

Answer 1

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

问题是，当 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;
    }
  });
}

我还没有测试过，但根据 < a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">文档页面 它应该可以工作。您所做的就是使用 jQuery 创建的请求对象将变量传递给回调函数。

希望有帮助