ajax登录表单，重新加载到表单而不是页面上

Question

so I have a login form where I used ajax to catch the login errors ie "incorrect password" from my login.php, and to display them onto the same login form rather than reloading a new page with the error message. That now works fine, but when the login IS successful it now loads the entire logged in page onto the login form rather than loading it to the entire page! You can see in the picture below. login ajax error Here is my code for the 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;
});

and here is my code for my login form:

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

Can anyone see what the issue is here? Thanks

Answer 1

It's because your ajax callback does the same thing every time. No matter what is returned, it goes into $("#login_errors").html() .

What you might want to do is send back a json with a page url if you succeed. Then you could do something like this:

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

To do this, you would need to modify your php server side component to do something like this:

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

This is just a sample to show how you return a JSON with a URL if your login succeeds, and to return an html string (which would be your login form) if login fails.

If you do this, and you set a breakpoint inside of your function(info){} in your javascript, you will find that on success, info has a urlRedirect property. And on failure, you will find that info is just a regular string with html data.