我尝试在登录脚本中使用Ajax，但是页面无法重定向

Question

I have an issue with my login script where I have implemented ajax so the message will display on the same page if there was an invalid login but I have some issue when user puts the right information nothing happens, I have to refresh the page then its says welcome user but when user puts wrong information it displays invalid login message immediately.

index.php

<?php
if (!isset($_SESSION['uid'])) {
    echo "<p>Welcome to our homepage. you can be part of our awesome community by signing up.</p>";
}else{
    echo "<p>You are now logged in and able to post comments in our site</p>";
}
?>
<?php
if (!isset($_SESSION['uid'])) {
    echo "<form action='login_parse.php' method='post' style='display: inline-block'>
    Username: <input type='text' name='username' id='username' />
    Password: <input type='password' name='password' id='password' />
    <input id='submit-button' type = 'button' value='login' id='submit' />";
    echo "</form>";
    echo "<form action='signup.php' method='post' style='display: inline-block'>";
    echo "&nbsp";
    echo "<input type='submit' name='submit' value='Signup'>";
    echo "</form>";

} else {
    echo "<form style='display: inline-block'>";
    echo "<p>You are logged in as ".$_SESSION['username']."";
    echo "</form>";
    echo "<form action='logout_parse.php' method='post' style='display: inline-block'>";
    echo "&nbsp";
    echo "<input type='submit' value='logout'>";
    echo "</form>";
    echo "<form action='profile.php' method='post' style='display: inline-block'>";
    echo "&nbsp";
    echo "<input type='submit' value='profile'>";
    echo "</form>";
}
?>
<script src="ajax.js"></script>
<script>


var HTTP = loadXMLDoc();

var submitEvent = document.getElementById("submit-button").onclick = function(){

    hello2(HTTP);
};

</script>

ajax.js

function hello2(){

    var username = encodeURIComponent(document.getElementById('username').value);
    var password = encodeURIComponent(document.getElementById('password').value);

    var url = "login.php?username="+username+"&password="+password;

    HTTP.onreadystatechange=function()
    {
        if (HTTP.readyState==4 && HTTP.status==200)
        {
            document.getElementById("ack1").innerHTML=HTTP.responseText;
        }
    };
    HTTP.open("POST", url ,true);
    HTTP.send();
}

login.php

<?php

session_start();
include_once("connect.php");

if (isset($_REQUEST['username'])) {
    $username = mysql_real_escape_string( $_GET["username"]);
    $password = mysql_real_escape_string( md5 ($_GET["password"]));
    $sql = "SELECT * FROM users WHERE username='".$username."' AND password='".$password."' LIMIT 1";
    $res = mysql_query($sql) or die(mysql_error());

    if(mysql_num_rows($res) == 1) {
        $row = mysql_fetch_assoc($res);
        $_SESSION['uid'] = $row['id'];
        $_SESSION['username'] = $row['username'];
            header("location: index.php");
        exit();
    } else{
        echo "INVALID login information.";
        exit();
    }
}

?>

to get around this issue I tried refreshing the page using header function in login.php but still nothings happens, I have to refresh the page manually n then it load welcome user. Am I doing something wrong.

Answer 1

You cannot use a header / server-side redirect when you call a file using ajax.

Instead you would have to check the results in the success function of your ajax call and use javascript to redirect if the login processed correctly.

Answer 2

here is some changes i made so its is properly working now

   function hello2(){

    var username = encodeURIComponent(document.getElementById('username').value);
    var password = encodeURIComponent(document.getElementById('password').value);

    var url = "login.php?username="+username+"&password="+password;

HTTP.onreadystatechange=function()
  {
    if (HTTP.readyState==4 && HTTP.status==200)
    {
        if (HTTP.responseText == 1){

                    window.location.replace("index.php");

        }
        else{

                document.getElementById("ack1").innerHTML=HTTP.responseText;

        }
   } 
  } 
HTTP.open("POST", url ,true);
HTTP.send();


}

Answer 3

您可以使用JavaScript的window.location.replace('redirectURL')重定向到特定页面。

Answer 4

You can put location.reload() to your HTTPhandler.

HTTP.onreadystatechange=function()
    {
        if (HTTP.readyState==4 && HTTP.status==200)
        {
            document.getElementById("ack1").innerHTML=HTTP.responseText;
        }
        else {
            location.reload();
        }
    };

Answer 5

When a user enter correct credentials you does not return correct response for the ajax call.

if(mysql_num_rows($res) == 1) {
        $row = mysql_fetch_assoc($res);
        $_SESSION['uid'] = $row['id'];
        $_SESSION['username'] = $row['username'];
           echo "Logged in as ".$row['username'];
        exit();
    } else{
        echo "INVALID login information.";
        exit();
    }