Question

我刚开始使用JavaScript处理非平凡的事情，所以这可能很简单......

我正在努力实现：迭代产品引用数组，为每个引用获取JSON，并返回所有产品信息的数组（具有通过引用索引的类似哈希的结构）。

我尝试了什么：

function fetchProductData(references){
  var product_data = new Object();
  references.forEach(function(ref){
    $.ajax({
      url: "http://localhost:3000/products/find.js?reference=" + ref,
      dataType: "jsonp",
      type: "GET",
      processData: false,
      contentType: "application/json",
      success: function(data) {
        product_data[ref] = data;
      }
    });
  });
  alert('before return: ' + product_data);
  return product_data;
};

$(document).ready(function(){
  var products = fetchProductData(references);
  alert('products : ' + products);
});

这是我不明白的：第一次调用alert来显示数组内容时，数组为空。但是，在第二次调用时，数组中会填充我想要的数据。

换句话说，“products：”alert会在上面的代码中显示我想要的数据。但如果我评论“返回之前：”alert，它就不再这样做了。这是为什么？

所以我的问题是：如何让jQuery进行多次$ .ajax调用以获取产品信息，在数组中收集该信息，然后返回该数组以便在代码中的其他位置使用它？

另外，为什么变量中的数据在alert中引用后可以神奇地访问？

Answer 1

“AJAX”中的“A”代表“异步”:)。在继续下一次迭代之前，您的程序不会等待调用完成，这意味着您可能无法获得所有数据。此警报也有同样的问题。在返回之前连接的操作：'到字符串添加足够的时间来获取变量中的一些数据。在更快的机器上，您可能会发现从未获得数据。

我认为你真的需要重新思考你的方法。在循环中拥有多个AJAX请求并不是一个好主意。它将大大增加页面的延迟。使用JSON传递所有参数一次，然后让服务器端脚本循环遍历并返回JSON中的单个响应。

function fetchProductData(references){
  // make sure your "references" is a JSON object
  $.getJSON('http://server/side/url', {'json':references}, function(product_data) {
      // do something with product_data (alert them, put them in an array, etc)

  });
}

Answer 2

function fetchProductData(references, cb){
  var length = 0;
  var product_data = new Object();
  references.forEach(function(ref){
    length++;
    $.ajax({
      url: "http://localhost:3000/products/find.js?reference=" + ref,
      dataType: "jsonp",
      type: "GET",
      processData: false,
      contentType: "application/json",
      success: function(data) {
        product_data[ref] = data;
        if (++count === length) {
          cb(product_data);
        }
      }
    });
  });

};

$(document).ready(function(){
  var products = fetchProductData(references, function(products) {
    alert('products : ' + products);
  });
});

在异步操作上使用回调。

它似乎与alert调用一起工作的原因是因为警告消息会给ajax足够的时间来填充数组。只有在警报框中单击OK后，才会触发return语句，为代码提供250ms的窗口，以便用数据填充数组。

Answer 3

您正在以异步模式执行ajax查询。你想要一个同步结果。尝试添加：

async: false

希望这有帮助。

Answer 4

你的$.ajax电话是异步的，所以发生的事情是你第一次拨打电话时，你的javascript会拨打电话，转到下一行（警报），然后循环。你的数据尚未返回。您可以采取的措施是在async: false来电中设置$.ajax选项。

Answer 5

这是一个异步操作。确定数据何时就绪的唯一可靠方法是回调函数：success: function () {...}，在数据最终返回时调用。把警报放在那里。

迭代数组，为每个元素调用$ .ajax。返回包含所有ajax结果的数组

5 个答案: