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

Question

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

我一直收到错误消息：

Uncaught TypeError: Cannot read property 'value' of null at loginRequest (loginRequest.js:3) at HTMLButtonElement.onclick (main.html:325)

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

<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 页面的顶部（登录表单以模式打开）

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

用户名为空的错误returns，这很难相信，因为A：我在点击按钮触发功能之前输入它，B：这是必填字段，所以我没有填满就不能点击按钮

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

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

Navigated to https://www.dfs-coach.com/main.html?login_userid=MyUsernm&login_psw=PwformyUser

（输入表格的信息：'MyUsern' 和 'PwformyUser'）

欢迎观看此错误的现场演示：https://dfs-coach.com/main.html

对于这方面的任何帮助，我将不胜感激。

谢谢

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

Answer 1

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

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

2。代码第 4 行中的另一个小错误，您尝试散列 login_psw bcrypt.hashSync(login_psw, 12); 但是该变量尚不存在。我相信你想要做的是散列 login_ps 变量使几行更早

我还建议您将函数紧跟在 xhr.onreadystatechange

之后

应该工作的代码：

<body>
<script src="https://cdn.jsdelivr.net/npm/bcryptjs@2.4.3/dist/bcrypt.min.js"></script>
<div 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>
</div> 
</body>
<script>
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_ps, 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 = function display_data() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
     }
    }
     </script>

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

AJAX POST XHR Failure - Why is this not working?

javascript

ajax

authentication

xmlhttprequest

ajaxform