AJAX POST XHR 失败 - 为什么这不起作用？

如何解决AJAX POST XHR 失败 - 为什么这不起作用？

我在这里拔头发。我检查了其他几个与 POST 和 AJAX 问题相关的帖子，但我发现没有一个有帮助。我不明白为什么这不起作用。

我不断收到错误消息：

未捕获的类型错误：无法读取 null 的属性“值” 在 loginRequest (loginRequest.js:3) 在 HTMLButtonElement.onclick (main.html:325)

这是“.html”页面上的表单（减去我的类调用）：

<form id="loginform"> 
 <div>
  <label for="login_userid"><b>Username</b></label>
  <input id="login_userid" type="text" placeholder="Enter Username" name=login_userid" 
                                            autocomplete="username" required>

  <label for="login_psw"><b>Password</b></label>
  <input id="login_psw" type="password" placeholder="Enter Password" name="login_psw" 
                                           autocomplete="current-password" required>

  <button onclick="loginRequest()">Login</button>
  
</div>

然后是“.js: 文件，我在“.html”文件的头部声明：

function loginRequest() {
{
    var login_userId = document.getElementById('login_userId').value;
    var login_ps = document.getElementById('login_psw').value;
    const bcrypt = dcodeIO.bcrypt;
    var login_psw = bcrypt.hashSync(login_psw,12);

    var xhr;
    if (window.XMLHttpRequest) { // Mozilla,Safari,...
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE 8 and older
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var data = "login_userId=" + login_userId + "&login_psw=" + login_psw;
    xhr.open("POST","https://dfs-coach.com/assets/php/login.php",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(data);
    xhr.onreadystatechange = display_data;
    function display_data() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //alert(xhr.responseText);
                document.getElementById("login_result").innerHTML = xhr.responseText;
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
 }

}

注意：bcrypt.js 也是在 head 中声明的，在 loginrequest.js 之后。 '#login_result' 元素位于 html 页面的顶部（登录表单以模式打开）

我不知道我的错误在哪里..我知道这将是我做的事情，即语法错误，范围问题，。等等...但我找不到它。

错误返回用户名为空，这很难相信，因为A：我在点击按钮触发功能之前输入它，而B：它是必填字段，所以我不能点击按钮未填写。

但是，我从上面得到了 TypeError，然后浏览器将正确的信息以纯文本形式添加到当前 URL 的末尾，它出现在我的地址栏中。这发生在本地和活动的网络服务器上。

开发面板将此显示为“信息”条目：

导航到 https://www.dfs-coach.com/main.html?login_userid=MyUsernm&login_psw=PwformyUser

（信息输入表单：“MyUsern”和“PwformyUser”）

请随时查看此错误的现场演示：https://dfs-coach.com/main.html

我将不胜感激。

谢谢

PS：我还尝试在 Dom 元素上同时使用“.innerHTML”和“innerText”而不是“value”，并将表单数据作为 FormData 和 json 发送。一切都无济于事。

解决方法

我在问题的代码片段中发现了两个可以轻松解决的问题：

1. 在函数的第一行中，您尝试通过 id 查找元素：login_userId，但是该元素在 HTML 代码中被命名为 login_userid，请确保大小写相同，否则 {{1 }} 不会找到正确的元素

2. 代码第 4 行中的另一个小错误，您尝试对 login_psw document.getElementById 进行哈希处理，但是该变量尚不存在。我相信你想要做的是散列 bcrypt.hashSync(login_psw,12); 变量之前的几行

我也建议你把函数放在 xhr.onreadystatechange 之后立即

应该可以工作的代码：

login_ps