Question

我正在尝试使用Ajax来验证存储在服务器上的php文档中的用户名和密码。用户名和密码预先存储在文档中。

在我的HTML页面上是用户名字段和密码字段。然后，当他们单击“登录”按钮时，它会调用以下函数：

    function checkLogin() {
        var user = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var data = "userName=" + user + "&password=" + password;

        var request = new XMLHttpRequest();

        request.open("POST", "check.php", false);
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        request.send(data);

        if (request.status === 200) {
            window.open("test.html");
        } else {
            var messageSpan = document.getElementById("response");

            var responseJson = JSON.parse(request.responseText);
            messageSpan.innerHTML = "Your password of " + responseJson["password"] + " was incorrect.";
        }
    }

我遇到的问题是，如果用户名/密码不正确，它永远不会到达其他地方。即使字段中没有任何内容，也会打开新页面。我认为所有数据都是正确的，我做错了什么？

注意：以上代码仅用于测试目的，在发布网页时实际上不会被使用。我只是想看看发生了什么并让它继续工作。

Answer 1

问题是你每次都从check.php获得状态200。在check.php中你需要做一些像

这样的事情

// let validate() be function that validates your username/password     


// and returns true/false on validation

if(validate()){
  http_response_code(200);
} else {
  http_response_code(401);
}

希望有所帮助

Answer 2

只需你可以像这样使用ajax，

   <script>
    function checkLogin() {

    var user = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    //progress        
                    xhr.upload.addEventListener("progress", function(e) {
                        //progress value e                            
                    }, false);
                    return xhr;
                },
                type: "POST",
                url: "check.php",
                data: {'userName' : user , 'password' : password},
                dataType:json,
                success: function(msg) {
                   //when success //200 ok
                 if(msg.status=="done"){
                 window.open("test.html");                      
                  }else{    
    var messageSpan = document.getElementById("response");
    messageSpan.innerHTML = "Your password of " + msg.password+ " was incorrect.";
}

                },
            error: function(jqXHR, textStatus, errorThrown) {
               //when error   
            }
        });
}
</script>

你的php服务器端就像这样，

    //$status="fail" or "done"
    //success must be always success
$respond=array("success"=>"success","status"=>$status,"password"=>$password);
   echo json_encode($respond);
   exit;

我认为这对你有用！

Answer 3

最有可能的是，check.php在响应时回显为真或假，在某些情况下，您会在成功时回显用户ID。无论如何，您的响应代码为200，以便成功进行服务器通信。如果获得200，请检查request.responseText。

if (request.readyState == 4 && request.status === 200) { 
var responseJson = JSON.parse(request.responseText); 
if (responseJson['success'] == 1){
    window.open("test.html"); 
} else { 
    var messageSpan = document.getElementById("response"); 
    messageSpan.innerHTML = "Your username and password combination was incorrect."; 
}} else {
//For debugging purpose add an alert message here. alert(request.status);
messageSpan.innerHTML = "A server connection error occurred!";  }

值得注意的是，你发回了json的回复。因此，您可以添加一个名为success whith value of true或false的节点来检查登录成功。但是，在响应消息中显示密码并不是一个好习惯。

通过Ajax验证用户名/密码

3 个答案: