如何执行顺序 ajax 调用？答案

【问题标题】：How do I perform sequential ajax calls?如何执行顺序 ajax 调用？
【发布时间】：2018-11-07 23:47:51
【问题描述】：

我有一个按钮button1，一旦点击它就会重定向到一个网址www.first.com。此 url 在其响应 www.second.com 中包含另一个 url。我使用 ajax 调用拦截请求，而不是重定向到 www.first.com，而是重定向到 www.second.com。以下代码运行良好，并且符合我的预期：

document.getElementById("button1").addEventListener("click", function (e) {
  e.preventDefault();
  $.ajax({
    url: 'http://www.first.com',
    method: 'GET',
    crossDomain : true,
    success: function(response){
      //here I am redirected to www.second.com
      window.location.href = response;
     }
  });
});

我想做另一个 ajax 请求 - 页面 www.second.com 自动重定向到 www.third.com。我不想对 url 进行一些简单的字符串操作（假设我想将其更改为 www.third2.com），然后直接重定向到 www.third2.com。我怎么做？我想我需要另一个 ajax 调用，但我不知道如何在完成第一个调用后使其按顺序运行。

张贴我到目前为止尝试过的和没用的：

success: function(response){
     $.ajax({
        url: response,
        method: 'GET',
        crossDomain : true,
        xhrFields: {
          withCredentials: false
        },
        success: function(result2){
          //it does not redirect to `google.com`; it still redirects to `www.second.com`
          result2 = "https://www.google.com/";
          window.location.href = result2;
          alert("This alert does not show");
        }
      });
      //maybe I have to remove this line? 
      window.location.href = response;
     },

【问题讨论】：

url: 'http://www.first.com, 中缺少逗号
如果“页面www.second.com自动被重定向到www.third.com”那么你就没有问题了，因为浏览器会处理301/302回应
听起来像一个 XY 问题，您“获取” second.com，而不是返回页面，而是返回一些文本以转到 third.com - 当它应该返回时直接使用新网址的 301/302。
@freedomn-m 我试图将另一个 ajax 函数放入我的 success 函数中，但没有成功
你怎么知道它是否是重定向？它会永远是第一/第二->第三吗？如果第二个不是重定向，或者第三个也是重定向怎么办？这就是在服务器上设置正确响应的目的，$.ajax 将处理它。不要试图重新发明轮子。

标签： javascript jquery ajax promise

【解决方案1】：

您可以在第一个请求回调中简单地发出另一个 ajax 请求，如下所示：

document.getElementById("button1").addEventListener("click", function (e) {
  e.preventDefault();
  $.ajax({
    url: 'http://www.first.com',
    method: 'GET',
    crossDomain : true,
    xhrFields: {
      withCredentials: false
    },
    success: function(response){
      $.ajax({
        url: response,
        method: 'GET',
        crossDomain: true,
        xhrFields: {
          withCredentials: false
        }
      },
      success: function(response2){
        window.location.href = response2;
      });
    }
  });
});

虽然不是很漂亮，但你可以使用promises 获得更简洁的代码。

【讨论】：

我认为您需要删除window.location.href = response;，因为它将在您的回调之前执行。
我确实删除了它，但没有发生重定向
如果你去 devtools 检查网络，你看到第二个请求的响应了吗？
我看到 www.second.com 被调用，状态为 302，www.third.com 被调用，状态为 302

【解决方案2】：

为了澄清，您没有拦截重定向。您正在单击按钮发出出站请求。我只是指出这一点，以便我们说同一种语言。因为，一旦您获得辅助 URL，您就会重定向到该位置。

因此，您的答案取决于您真正想要完成的任务。如果您只是想获取返回的 URL 并向其发出另一个 AJAX 请求（并对其进行操作、重定向到它，或两者兼而有之），只需将辅助请求嵌套在您的 success 函数中。

但是，如果您想重定向到第二个位置，然后发出后续请求，这会更加复杂。您必须确保由第二个 URL 表示的页面具有一个加载方法，该方法可以发出另一个 AJAX 请求或页面重定向，无论您尝试完成哪个。一旦你设置了window.location.href（在获得第二个 URL 之后），浏览器就会尝试重定向。任何页面卸载事件都将是不可靠的，浏览器到浏览器（根据我的经验）。

【讨论】：