在页面刷新之前，用户不会被重定向

Question

I have a login page, in which I have written JQuery code to make an ajax post request which in turn calls another php script to validate the user credentials. If the credentials are correct, user will be redirected to the home page in the php script itself. But when the user gives his credentials, and clicks login he isnt getting redirected until page is reloaded. This is the strange issue I am facing. Please help me resolve it.

Here is my JQuery code:

<script>
            $( document ).ready(function() {
                $('#loginButton').click(function ()
                {

                    var username = $("#inputUsername").val();             
                    var password = $("#inputPassword").val();
                    var dataString = 'inputUsername=' + username + '&inputPassword=' + password;
                    if ($.trim(username).length > 0 && $.trim(password).length > 0)
                    {
                        $.ajax({
                            type: "POST",
                            url: "ajaxLogin.php",
                            data: dataString,
                            cache: false,
                            beforeSend: function () {
                                $("#loginButton").val('Connecting...');
                            },

                        });
                    }
                    return false;
                });

            });
</script>

This is html login form

<form>
                    <div class="form-group center-block">
                        <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-login center-block" id="loginButton">Login</button>
                    <div id="error"></div>
               </form>

PHP code:

<?php
include("db.php");
session_start();
$username=mysqli_real_escape_string($db,$_POST['inputUsername']); 
$password=mysqli_real_escape_string($db,$_POST['inputPassword']); 
$result=mysqli_query($db,"SELECT user_id FROM user_info WHERE username='".$username."' and password='".$password."'");
$count=mysqli_num_rows($result);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
// If result matched $username and $password, table row  must be 1 row
if($count==1)
{
$_SESSION['login_user']=$row['user_id']; //Storing user session value.
header('Location: home.html');
} 
?>

Thanks in advance

Answer 1

In Ajax request on PHP when terminate that you use of echo in php section, and you will be use exit() method after echo to cancel continue page.

My opinion for you is, you use a echo command and exit() and use Success method in Ajax to validate echo value and if validate is true redirect with JavaScript.

<script>
        $( document ).ready(function() {
            $('#loginButton').click(function ()
            {

                var username = $("#inputUsername").val();             
                var password = $("#inputPassword").val();
                var dataString = 'inputUsername=' + username + '&inputPassword=' + password;
                if ($.trim(username).length > 0 && $.trim(password).length > 0)
                {
                    $.ajax({
                        type: "POST",
                        url: "ajaxLogin.php",
                        data: dataString,
                        cache: false,
                        success: function (data)
                            {
                                if (data == 1) {
                                    window.location = "home.html";
                            }
                        beforeSend: function () {
                            $("#loginButton").val('Connecting...');
                        },

                    });
                } else {
                    return false;
                }
            });

        });

You will be this code in php if your validate is TRUE :

echo 1;
exit();

echo 1, return 1 to data in Success method .