Question

我有以下ajax脚本和表单登录我的网站：

<div class="shadowbar"><form id="login" method="post" action="/doLogin">
<div id="alert"></div>
<fieldset>

 <legend>Log In</legend>
<div class="input-group">
  <span class="input-group-addon">E-Mail</span>

  <input type="email" class="form-control" name="email" value="" /><br />
</div>
<div class="input-group">
  <span class="input-group-addon">Password</span>

  <input type="password" class="form-control" name="password" />
  </div>

</fieldset>

<input type="submit"  class="btn btn-primary" value="Log In" name="submit" />

</form></div>
<script>
$.ajax({
    type: "post",
    url: "/doLogin",
    data: $('#login').serialize(),
    success: function(result) {
                if(result == " success"){
                    window.location = "/index.php";
                }else if(result == " failure"){
                    $("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>");
                    //$("#alert").show();
                }
    }
});

但它并没有预先形成ajax，并将我带到结果页面，这不是我想要的。有没有具体的原因，AJAX不工作？我是JavaScript的新手，很抱歉，如果这很明显。

Answer 1

一旦脚本加载，您正在运行Ajax函数，并且在表单提交时没有做任何事情来阻止表单正常提交。

您需要将已经使用的JS移动到一个函数中。然后将该函数绑定为表单上的提交处理程序。然后阻止提交事件的默认行为。

＆＃13;

$('#login').on("submit", function(event) {
  event.preventDefault();


  $.ajax({
    type: "post",
    url: this.action,
    data: $(this).serialize(),
    success: function(result) {
      if (result == " success") {
        window.location = "/index.php";
      } else if (result == " failure") {
        $("#alert").html("<div class='alert alert-warning'>Either your username or password are incorrect, or you've not activated your account.</div>");
        //$("#alert").show();
      }
    }
  });

});

＆＃13;

<form action="/doLogin" method="post" id='#login'>

  <fieldset>
    <legend>Log In</legend>
    <div class="input-group">
      <label for="email" class="input-group-addon">E-Mail</label>

      <input type="email" class="form-control" name="email" id="email" value="" />
      <br />
    </div>
    <div class="input-group">
      <label class="input-group-addon" for="password">Password</label>

      <input type="password" class="form-control" name="password" id="password" />
    </div>

  </fieldset>

  <input type="submit" class="btn btn-primary" value="Log In" name="submit" />

</form>
</div>

＆＃13;

这就是说 - 当您成功登录时，您只需重定向到另一个页面。你几乎肯定最好不要使用Ajax。

Answer 2

如果您是ajax

的新手，以下链接可能会有所帮助

http://webdevelopingcat.com/jquery-php-beginner-tutorial-ajax/

Answer 3

登录应该是表单ID，但您没有发布表单开始标记

<form id = "login">

在你的ajax代码中，你应该像这样处理表单的提交事件：

$("#login").submit(function({  // your logic should be here

}))

AJAX登录表单不起作用

3 个答案: