HTML-данные из нескольких запросов ajax к массиву javascript

Question

Я пытаюсь предварительно загрузить html-контент, используя AJAX и jQuery. Функция обратного вызова 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, поэтому объяснения и решения (аналогичные или разные методы-одинаковые-результаты) являются welome.

Кстати, я знаю, что один больший запрос 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;
    }
  });
}

Я не проверял это, но согласно странице документации это должно работать.Все, что вы делаете, - это используете объект запроса, созданный jQuery, для передачи вашей переменной в функцию обратного вызова.

Надеюсь, что это поможет