Ajaxを使用してログインフォームにエラーが発生した新しいページを再ロードしない

Question

私はajaxを使用してlogin.phpからログインエラーをキャッチし、同じログインフォームに表示する新しいページをエラーメッセージで再ロードするよりもこれで正常に動作しますが、ログインが成功すると、新しいページにロードするのではなく、ログインしたページ全体（home.php）がログインフォームにロードされます。あなたはここの画像で、を見ることができます。ここで私が使用しているAJAXのための私のコードは次のとおりです。ここで

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

    $.post($("#login_form").attr("action"), $("#login_form :input").serializeArray(), function(info){$("#login_errors").html(info);}); 
    // Prevent the default action from occurring. 
    return false; 
}); 

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

は、私が使用している私のログインフォームのコードは次のとおりです。

<form id= "login_form" action="login.php" method="post"> 
<span id="login_errors" style="color:#F00;"></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" name="keep" /> 
<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> 

Answer 1

あなた$.post()のfunction(info){$("#login_errors").html(info);}一部 - 成功のコールバックは - ですあなたのlogin.phpが生成している出力（info）を取り出し、id login_errors（恐らくログインフォームの一番下の部分）を持つ要素に挿入します。

ユーザーが新しいページにバウンスされるようにするには、成功コールバックを更新してそれを処理する必要があります。たとえば、成功のあなたのlogin.phpのようなものを行うことができます：

if (... login-success test ...) { 
    echo 'OK'; 
} else { 
    echo 'Login failed, pls try again'; 
} 

を次に、あなたの成功コールバックは、その出力を確認することができますし、それに応じて反応する、のような：

if (info === 'OK') { 
    // login.php says login succeeded, bounce user to dashboard 
    window.location.href = 'http://successful/login/url'; 
} else { 
    // login.php says login failed, show the output it gave us 
    $("#login_errors").html(info) 
}