javascript - Ajax php 登录表单不指向另一个页面

Question

我按照两个单独的 Ajax 在线教程尝试使我的登录表单在出现错误消息时不重定向到另一个页面。但是，这两种方法似乎都不起作用，我的表单仍然指向另一个页面并在那里显示错误消息。我不明白问题出在哪里，因为我几乎直接按照教程进行操作并且它适用于他们但不适用于我。以下是我的表单代码:

<form id= "login_form" action="login.php" method="post">
          <span id="login_errors"></span>
          <label>Email Address</label>
          <input type="text" name="email" id="email" required="required"/>
         <br />

         <label>Password</label>
         <input type="password" name="password" id="password" required="required"/>
         <br />

         <div class="checkbox">
         <input id="remember" type="checkbox" />
         <label for="remember">Keep me signed in</label>
         </div>

         <div class="action_btns">
         <div class="one_half last"><input type="submit" class="btn btn-blue" id="login_button" value="Login"></div>
         <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
         </div>
</form>

这是基于我遵循的教程之一的 ajax 代码:

$("#login_button").click(function(){

$.post($("#login_form").attr("action"), $("#login_form:input").serializeArray(), function(info){$("#login_errors").html(info);});
});

$("login_form").submit(function(){
    return false;
});

这是其他教程的代码，但也不起作用:

$("#login_button").click(function(){
var action = $("#login_form").attr("action");
var form_data = {
    email: $("#email").val(),
    password: $("#password").val(),
    is_ajax: 1
};
$.ajax({
    type:"POST",
    url:"action",
    data: form_data,
    success: function(response){
        if(response == 'success'){
            $("#login_errors").html("successful!");
        }else{
            $("#login_errors").html("unsuccessful!");   
        }

    }
});
});

我在我的网页顶部包含了 Jquery:

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

并且还在页面顶部链接了我的 ajax 文件。

<script type="text/javascript" src="login_Ajax.js"></script>

Answer 1

第二个 ajax 代码中有一个拼写错误:url 参数应该代替 url: "action"，如下所示:

url: action,

没有引号，因为它指的是上面几行声明的变量。不确定这是否能解决您的问题，但要查看全貌，您还应该显示您的“login.php”。