Ajax Login-Formular, neuladen auf das Formular statt Seite

Question

so habe ich ein Login-Formular, wo ich Ajax verwendet, um die Login-Fehler dh "falsches Passwort" aus meiner login.php zu fangen, und sie auf dem gleichen Login-Formular anzeigen als eine neue Seite mit der Fehlermeldung neu zu laden. Das funktioniert jetzt gut, aber wenn die Anmeldung erfolgreich ist, lädt sie jetzt die gesamte eingeloggte Seite auf das Login-Formular, anstatt sie auf die gesamte Seite zu laden! Sie können auf dem Bild unten sehen. login ajax error Hier ist mein Code für die Ajax: mein Code für mein Login-Formular

$("#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; 
}); 

und hier ist:

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

Kann jemand sehen, was das Problem hier ist? Danke

Answer 1

Es ist, weil Ihr Ajax-Rückruf immer dasselbe tut. Egal was zurückgegeben wird, es geht in $("#login_errors").html().

Wenn Sie erfolgreich sind, senden Sie ein JSON mit einer Seiten-URL zurück. Dann könnten Sie so etwas tun:

$.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); 
    }); 

Um dies zu tun, müssen Sie Ihre php Server-Seite-Komponente ändern, so etwas zu tun:

<?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>"; 
} 
?> 

Dies ist nur ein Beispiel zu zeigen, wie Sie geben ein JSON mit einer URL zurück, wenn Ihre Anmeldung erfolgreich ist, und geben eine HTML-Zeichenfolge zurück (dies wäre Ihr Anmeldeformular), wenn die Anmeldung fehlschlägt.

Wenn Sie dies tun, und Sie setzen einen Haltepunkt in Ihrer function(info){} in Ihrem JavaScript aktivieren, werden Sie, dass auf Erfolg finden, info hat eine urlRedirect Eigenschaft. Bei einem Fehler werden Sie feststellen, dass info nur eine reguläre Zeichenfolge mit HTML-Daten ist.