通过 Ajax 验证用户名/密码

Validating username/password through Ajax

本文关键字：密码 用户 Ajax 验证 通过      更新时间：2023-09-26

我正在尝试使用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 not corerct. Please try again.";
        }
    }

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

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

很可能

您的检查.php在响应时回显出真或假 在某些情况下，您在成功时回显出用户 ID。无论如何，您的响应代码为 200 表示成功的服务器通信。检查请求.响应文本，以防得到 200。

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 的节点，其值为 true 或 false，以检查登录的成功。不过，在响应消息中显示密码不是一个好做法。

问题是你每次都从你的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);
}

希望对您有所帮助

简单地说，

你可以像这样使用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;

我认为这对你有用！

相关文章：