两个ajax帖子调用一个提交按钮

时间:2015-05-29 18:20:32

标签: javascript jquery ajax post

这可能吗?我目前只打一个电话。 我想用用户名/密码进行一次电话会议,另一个用电子邮件/密码和一个提交按钮。如果两者都成功,重定向到另一个页面将是最好的。

使用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>

1 个答案:

答案 0 :(得分:0)

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

但除此之外......我可能只是在彼此之后运行两个ajax调用。它们将运行异步,你几乎无法控制哪个将首先完成,所以你应该只有一个bool,比如firstAjaxHasSucceeded,这将在任一个ajax调用成功后生效。如果它已经是真的,请将用户转移到另一个页面(两个ajax调用也应该检查这个)。

修改

伪代码(没有时间做其他事情):

&#13;
&#13;
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();
&#13;
&#13;
&#13;