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

感谢。

Answer 1

在请求返回之前，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创建的请求对象将您的变量传递给回调函数。

希望有所帮助

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

1 个答案: