jQuery ajax调用后如何重定向页面？

Question

This is my Login form code. My problem is after the statement is true. Is will not be redirect to the home page instead it's just show the home page at my index page.

How to Redirect jquery ajax at the other page after the statement is true?

HTML Code

<form id="myForm" class="form-group" method="post" action="actions/login_check.php">    
    <div id="result"></div> 
    <table class="table-condensed" >
        <tr><br>
          <td><input type="text" name="username" class="form-control" autofocus="autofocus" placeholder="Username" size="40"></td>
        </tr>
        <tr>
            <td><input type="password" name="password" placeholder="Password" class="form-control"></td>
        </tr>
        <tr>
            <td><button id="submit" class="btn btn-primary form-control">Sign In</button></td>
        </tr>
        <tr>
            <td align="right" style="font-size:14px;"><a href="forgot_password.php">Forgot Password?</a></td>
        </tr>
    </table>
</form>

PHP code

$username = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,sha1($_POST['password']));
$empty = "da39a3ee5e6b4b0d3255bfef95601890afd80709";

$query = mysqli_query($con,"SELECT * FROM users WHERE username = '".$username."' AND password = '".$password."'");
$row = mysqli_num_rows($query);
$getUser = mysqli_fetch_array($query);


if(empty($username) or $password == $empty)
    echo "Invalid Email or Password";
elseif($username == $getUser['username'] and $password ==  $getUser['password']){
    session_start();
    $_SESSION['username'] = $username;
    $online = "UPDATE users SET active = 1 WHERE username = '".$username."'";
    mysqli_query($con,$online);
    header("Location: ../home.php");
    $_SESSION['timestamp'] = time();
}else
    echo "Invalid Email or Password";

jQuery Ajax

    $("button#submit").click(function(){

    if( $("#username").val == "" || $("#password").val == "")
        $("div#result").html("Please enter username and password");
    else
        $.post( $("#myForm").attr("action"),
            $("#myForm :input").serializeArray(),
            function(data) {
                $("div#result").html(data);
            }
         );

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

Answer 1

In the POST response, you can use window.location.href

function(data) {
    $("div#result").html(data);
    window.location.href=<homepageurl> 
}

Answer 2

As of jQuery 1.8, you can use .done to redirect the user after a successful jquery .post .

  .done(function() {
    window.location.href='http://www.successpage.com'; 
  })

ie:

$("button#submit").click(function(){

if( $("#username").val == "" || $("#password").val == "")
    $("div#result").html("Please enter username and password");
else
    $.post( $("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(data) {
            $("div#result").html(data);
        }).done(function() {
    window.location.href='http://www.successpage.com'; 
  });

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

});

Answer 3

There are plently of options.
1) You can assign the URL which you want to redirect. But there is a problem.

Using ajax, data loads asynchronously, so there might be cases when the page redirects in between the ajax response.

. Inside that done() method, pass an anonymous function, and use window.location.href inside it.
2) You can also use .load() method which is also the short hand for .ajax() to perform page load without the page refresh which gives user a sense of redirection. So its your choice. Pick any one!

Answer 4

Just try window.location

success: function (response) {
               if (response.d == true) {
                    window.location = "directed_page";
                }
            },

or try to use

window.location.replace()