Question

我想从文本文件中读取一个单词并使用它来验证密码。当然，我意识到这绝不是安全的，永远不会在现实世界中使用，但它是我必须要做的大学课程的任务。每次我点击提交，我都会被带到'messing.html'页面，无论密码是否正确......有人可以帮忙吗？

<!DOCTYPE html>
<html>


<body>

<form name="login" onSubmit="return validateForm();" action="messing.html" method="post">
    <label>Password</label>
    <input type="password" name="pword" placeholder="password">
    <input type="submit" value="Login"/>
</form>

<script>
    function validateForm() {
        var user_input = document.login.pword.value;


        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","books.txt",false);
        xmlhttp.send();
        var y =xmlhttp.responseText;




        if (user_input == y){
            return true;
        }
        else {
            alert ("Login was unsuccessful, please check your password");
            return false;
        }
  }
</script>

</body>

</html>

Answer 1

问题是onsubmit。因为您不会阻止表单的默认操作。您的表单将发送到messing.html并将加载。

如果要使用xmlHTTPRequest，则需要阻止表单上的默认操作。

function validateForm(e) {
     ....
   e.preventDefault(); //<--- magic

}

旁注。使用同步xmlHTTPRequest被认为是不好的做法，在现代浏览器中不允许使用，因为如果没有可用的响应或者需要很长时间才能加载，它可能会挂起浏览器。在这种情况下，切换到异步很简单。

function validateForm(e) {
    var user_input = document.login.pword.value;


    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","books.txt",true); //changed to true

    xmlhttp.onreadystatechange = function(){
     if (this.status == 200 && this.readystate == 4)
     {
       var y =xmlhttp.responseText;
       if (user_input == y){
          location.href = "messing.html";

       }
       else {
          alert ("Login was unsuccessful, please check your password");
          return false;
       }
     }            
    }
    xmlhttp.send();
    e.preventDefault();

}

使用xmlhttp从文本文件中读取

1 个答案: