同时Ajax请求返回相同的结果

Question

我的脚本正在同时进行两次Ajax调用，我注意到尽管每个页面的内容完全不同，但我在成功回调中获得了相同的结果。这是初始脚本的样子：

function getData(url) {
    console.info(url);
    $.ajax({
        type: "GET",
        url: url,
        async: true,
        success: function(data) {
            var response = $(data);
            var $products = response.find("#results tr");
        }
    });
}

getData("http://www.thompson-morgan.com/flower-bulb-sale")
getData("http://www.thompson-morgan.com/value-seed-varieties");

检查DevTools网络选项卡，每个请求确实从第一个请求（http://www.thompson-morgan.com/flower-bulb-sale）返回内容。

第一个请求（http://www.thompson-morgan.com/flower-bulb-sale）产生正确的结果（它的黄色花朵是页面内容）：

但第二个请求（http://www.thompson-morgan.com/value-seed-varieties）会产生第一个请求的结果！：

似乎唯一阻止这种情况发生的事情是每次使用setTimeout进行调用时会略微错开：

setTimeout(function(){getData("http://www.thompson-morgan.com/flower-bulb-sale")}, 0);
setTimeout(function(){getData("http://www.thompson-morgan.com/value-seed-varieties")}, 1000);

为什么第二个请求会返回第一个请求中的内容？有没有办法解决这个问题，而不必像我一样使用错开请求？

Answer 1

将以上代码更改为以下内容。现在我们有一个返回值，可以使用.done（）方法

指定数据的位置

function getData(url) {
    return $.ajax({
      type: "GET",
      url: url,
      async: true,
    });
}

getData("http://www.thompson-morgan.com/flower-bulb-sale")
  .done(function(res) {
      //do something with res
      var response = $(data);
      console.log(response.find("#results tr"));
  });
getData("http://www.thompson-morgan.com/value-seed-varieties")
  .done(function(res) {
            //do something with res
      var response = $(data);
      console.log(response.find("#results tr"));
  });