ajaxログインフォーム、ページ

Question

ではなくフォームにリロードするので、login.phpからログインエラーをキャッチするためにajaxを使用したログインフォームを使用しています。新しいページをエラーメッセージで再ロードするよりもこれで正常に動作しますが、ログインが成功すると、ログインしたページ全体がページ全体にロードされるのではなく、ログインフォームにロードされます。あなたは下の図に見ることができます。ここで login ajax error は、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

あなたのajaxコールバックが毎回同じことをするからです。何が返されても、$("#login_errors").html()に入ります。

あなたが成功した場合は、ページURLのjsonを返信してください。これはどのように表示するだけのサンプルです

<?php 
$success = $_REQUEST['s']; 
if($success) { 
    header('Content-type: application/json'); 
    echo json_encode(array('urlRedirect'=> '/home.php')); 
} else { 
    echo "<div>wrong username or password - please try again</div>"; 
} 
?> 

を：

$.post($("#login_form").attr("action"), 
    $("#login_form :input").serializeArray(), 
    function(info){ 
    if(info.urlRedirect!=null) 
     window.location.href = info.urlRedirect; 
    else $("#login_errors").html(info); 
    }); 

はこれを行うには、あなたがこのような何かをするためにあなたのphpサーバー側のコンポーネントを変更する必要があります：次に、あなたはこのような何かを行うことができますログインが成功した場合はURL付きのJSONを返し、ログインが失敗した場合はhtml文字列（ログインフォーム）を返します。

これを行い、JavaScriptのfunction(info){}の中にブレークポイントを設定すると、成功するとinfoにはurlRedirectというプロパティがあります。失敗した場合、infoはhtmlデータを含む通常の文字列であることがわかります。