两个 ajax post 调用，一个提交按钮答案

【问题标题】：Two ajax post calls with one submit button两个 ajax post 调用，一个提交按钮
【发布时间】：2015-05-29 18:20:32
【问题描述】：

这可能吗？我目前只打一个电话。我想用用户名/密码做一个电话后，另一个用电子邮件/密码用一个提交按钮。如果两者都成功，最好重定向到另一个页面。

使用 jQuery 进行 Ajax 调用：

$('form').submit(function() {
  $.ajax({
    type: "Post",
    url: $('form').attr('action'),
    data: $(this).serialize(),
    success: function(data, status, xhr) {
      alert("Login successful. Redirecting");
      window.setTimeout(function() {
        window.location.href = "3.3.3.3/login"
      }, 5000);

    },
    error: function(data, status, xhr) {
      $('form').trigger("reset");
      alert("Failed to login. Please try again.");
    }
  });

  return false;
  alert("AJAX request successfully completed");
});

<html>

<head>
  <title>Log In</title>

  <link rel="stylesheet" href="static">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>

<body>
  <form action="1.1.1.1/login" method="POST">

    <div class="login">
      <div class="login-screen">
        <div class="app-title">
          <h1> Login</h1>
        </div>
        <input class="form-control" type="text" required name="username" placeholder="Username">
        <input class="form-control" type="password" required name="password" placeholder="Password">
        <input class="form-control" type="hidden" required name="eauth" value="pam">
        <input class="form-control" type="text" required name="email" placeholder="email">

        <p>
          <input type="submit" value="Log In" />
        </p>
      </div>
    </div>
  </form>
</body>

</html>

【问题讨论】：

标签： javascript jquery ajax post

【解决方案1】：

是的，这是可能的。如果您必须检查两个不同的页面以确定用户是否可以继续，我认为那里有一些糟糕的后端选择？

但除此之外...我可能只是一个接一个地运行两个 ajax 调用。它们将异步运行，您几乎无法控制哪个将首先完成，因此您应该只拥有一个布尔值，例如 firstAjaxHasSucceeded，这在任何一个 ajax 调用成功后都会为真。如果它已经是真的，将用户转移到另一个页面（两个 ajax 调用也应该检查这个）。

编辑

伪代码（没有时间做其他事情）：

var firstAjaxHasSucceeded = false;

firstAjaxCall() {
  var success = verifyThisAjaxAnswer();
  
  if (firstAjaxHasSucceeded && success) {
    //Transfer to next page, yeay!! 
  }
  
  firstAjaxHasSucceeded = true;
}

secondAjaxCall() {
  var success = verifyThisAjaxAnswer();
  
  if (firstAjaxHasSucceeded && success) {
    //Transfer to next page, yeay!! 
  }
  
  firstAjaxHasSucceeded = true;
}

firstAjaxCall();
secondAjaxCall();

【讨论】：

没有时间，所以我在上面给你写了一些伪代码，你必须自己弄清楚一些事情。 :)