PHP，JavaScript AJAX

Question

我的登錄頁面有以下代碼：

function LoginToSite() {
    if (getElementById('username').value != "" && getElementById('password').value != "") {
        request.addEventListener('readystatechange', Login, false);

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


        request.open('GET', 'login.php?username='+username+"&password="+password, true);
        request.send(null);
    }
}

function Login() {
    if (request.readyState === 4 && request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == 1){
            alert("Login is successfull");
        }
        else if(request.responseText == 0){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
    request.send();
}

PHP代碼

session_start();

$logins = array("username1" => "password1", "username2" => "password2" );

$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username != '' and $password != ''){

    foreach($logins as $key=>$value){
        if(($key == $username) && ($value == $password)){
            echo "1";
        }else{
            echo "0";
        }
    }

}else{
    echo "0";
}

當我嘗試登錄時，該站點首先警告發生了問題，然后再次發生相同的情況，然后警告“就緒”。 我必須做些什么改變才能做到這一點？

Answer 1

readystatechange事件被多次調用...而就緒狀態從0-> 1-> 2-> 3-> 4更改...所有請求都經過這些更改...當readystate變為1時，您的邏輯將警告錯誤，然后是2，然后是3 ... ...僅當readystate變為4 AND狀態為200時，才會運行“ if”條件

您也正在呼叫request.send每次您進入“登錄”

所以一個簡單的改變

function Login() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            alert("READY");
            var myResponse = JSON.parse(this.responseText);
            getElementById("count").innerHTML = myResponse;
            getElementById('login').style.display = "none";
            if(request.responseText == "1"){
                alert("Login is successfull");
            }
            else if(request.responseText == "0"){
                alert("Invalid Username or Password");
            }
        }
        else{
            alert("Error :Something went wrong");
        }
    }
}

注意：檢查request.responseText == "1"因為響應將是字符串而不是數字

更好（我認為）的解決方案是不監聽readystate的更改，而是監聽load事件

request.addEventListener('load', Login, false);

那么您的登錄代碼是

function Login() {
    if (request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == "1"){
            alert("Login is successfull");
        }
        else if(request.responseText == "0"){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
}

Answer 2

您正在將readyState與4進行比較，將status與200進行比較。 在調用Login()所有其他情況下Login()在請求運行時多次發生），您的代碼將發出“錯誤：發生錯誤”的警報。 不知道這里是否是麻煩的壓痕。
最后還有一個流浪的request.send() 。

用這個：

function Login() {
  if (request.readyState < 4) return; // do nothing
  if (request.status === 200) {
    alert("READY");
    var myResponse = request.responseText;
    getElementById("count").innerHTML = myResponse;
    if (myResponse == 1) {
      alert("Login is successfull");
      getElementById('login').style.display = "none";
    } else if (myResponse == 0) {
      alert("Invalid Username or Password");
    }
  } else {
    alert("Error: Something went wrong");
  }
}