在来自 PHP 的 JQuery AJAX 请求之后重定向

Question

So when the login button is clicked, I use JQuery POST method to get data from login.php if the login was successful or not. If it wasn't (no user found), then it correctly displays the message.

But when I want to redirect the user (user exists), it prints out the whole webpage into that one DIV.

The JQuery after button is pressed:

$(function(){

$("#login-form").submit(function() {
    event.preventDefault();

    var name = $('#inputName').val();
    var password = $('#inputPassword').val();

    $.post("login.php", 
    {
        name: name,
        password: password
    },
    function(data)
    {
        $("#resultDiv").hide().html(data).fadeIn(1000).effect( "shake", {direction:"up",times:2, distance:10}, 750 );
    });
});
});

If login not successful, it displays. But when I want to redirect, doesen't work:

if(!$row) {
echo '<div class="alert alert-danger" style="margin-top:25px; margin-bottom: 0px; text-align:center;">Invalid <strong>username</strong> or <strong>password</strong>.</div>';
} else {

  $line = mysqli_fetch_assoc($query);

  $_SESSION['IP'] = $line["IP"];
  $_SESSION['ID'] = $line["ID"];
  $_SESSION['username'] = $username;

  header("location:choose.php");
}

So when the user logs in, how do I just redirect him? Don't want to display anything.

Answer 1

Your login script won't redirect the whole page the way you have it, it is only redirecting the AJAX request, so it makes sense that the whole page ends up in the resultDiv.

Your success function should look at the data returned before it applies the data to the resultDiv html().

I found it easier to make the login response a JSON data set, which makes it much easier to grab:

if(data.loggedIn==true) {
  window.location = data.location;
} else {}

You can also keep the resultDiv for errors, it is just:

$("#resultDiv").hide().html(data.errorMsg)...

For the php side:

if(!$row) {
  echo '{loggedIn:false,errorMsg:"<div class=\"alert alert-danger\" style=\"margin-top:25px; margin-bottom: 0px; text-align:center;\">Invalid <strong>username</strong> or <strong>password</strong>.</div>"}';
} else {

  $line = mysqli_fetch_assoc($query);

  $_SESSION['IP'] = $line["IP"];
  $_SESSION['ID'] = $line["ID"];
  $_SESSION['username'] = $username;

  echo '{loggedIn:true,location:"choose.php"}';

}

I hope this makes sense to you.