Javascript 试图通过xmlhttprequest提交html表单数据

我正试图建立一个简单的登录提示，以便进行一些内部测试，但我发现自己被卡住了。我的登录提示是通过HTML生成的，我正试图通过xmlhttprequest发送它。以下是我的JS代码：

var xhr=new-XMLHttpRequest（）；
函数loginResults（）{
var loginUser=document.getElementById（“用户名”）.value；
var loginPass=document.getElementById（“密码”）.value；
//console.log（logiuser+loginPass）；
xhr.open（“post”https://test.com/api/login/");
var loginda=“username=“+loginUser+”&password=“+loginPass”
xhr.send（登录数据）；
//控制台日志（loginda）；
xhr.addEventListener（“readystatechange”，processRequest，false）；
}
函数processRequest（e）{
如果（xhr.readyState==4&&xhr.status==200）{
var response=JSON.parse（xhr.responseText）；
控制台日志（响应）；
}
}

问题是xhr.send使用此方法完全失败。但是，如果我用纯文本替换发送的变量，那么一切正常。像这样：

var loginData = "username=" + "test@test.com" + "&password=" + "test1234"

通过表单数据获取信息和硬编码登录有什么区别？两个实例中的请求有效负载完全相同

编辑 以下是我的HTML表单的要点：

    <form name="isLogin" id="isLogin" onSubmit="loginResults()" method="post">

<div class="container">

<label for="username"><b>Email</b></label>

<input type="text" id="username" placeholder="Enter Email" name="username" required>

<label for="password"><b>Password</b></label>

<input type="password" id="password" placeholder="Enter Password" name="password" required>

<button id="submitLogin"  type="submit">Login</button>

电子邮件
密码
登录

---

在将值连接到URL查询字符串之前，需要对其进行转义：

    var loginUser = encodeURIComponent(document.getElementById("username").value);
    var loginPass = encodeURIComponent(document.getElementById("password").value);

其次，我不建议直接通过querystring传递密码。

---

传递请求的安全方式最好是用盐腌和散列。

请求被取消的原因是您没有拦截标准表单提交。当您单击登录按钮时，Chrome会发出AJAX请求，然后还会提交表单。由于这会导致页面加载，Chrome会取消AJAX请求

您需要做的是防止默认事件处理。一种干净的方法是在脚本中添加提交处理：

document.getElementById（“isLogin”）.onsubmit=function（e）{
e、 预防默认值（）；
//这里是阿贾克斯
console.log（“截获表单提交”）；
};

电子邮件
密码
登录
console.log（logiuser+loginPass）提供了什么信息和
console.log（loginda）？另外，是否存在任何明确的错误（您所说的“完全失败”是什么意思？您所说的“完全失败”是什么意思？第一个
console.log（）是什么意思
取消注释时显示？现在我的第一个猜测是，这两个变量不包含您认为它们的功能。您还应该在问题中添加相关的HTML。首先，您需要转义该值，而不是直接连接它。如果HTML如预期的那样，代码应该工作得非常好：“完全失败”我的意思是，在我的web浏览器中使用开发人员控制台时，登录请求显示为已取消，而不是200或403之类的。如果我取消注释第一个控制台日志，我会得到“test@test.comtest1234“如果我在获得第二个用户名时取消注释”=test@test.com&密码=test1234“如果我硬编码登录opr（如果它是通过表单数据给出的），结果是一样的。这就是为什么我对它不起作用感到困惑的原因。如果我不得不猜测，我认为xmlhttprequest不喜欢我试图传递数据的方式，为什么在问题和我的答案上都投了反对票？我投了你的反对票，因为这不是一个简单的问题解决这个问题。另外，OP已经在使用POST，这使得你的答案没有意义。@ChrisG我认为它确实解决了这个问题，因为当他通过将formdata的值作为属性
value
连接到URL中时，问题就出现了，而当他将formdata的值作为常量文本字符串连接时，问题就没有出现。问题似乎是由需要正确转义的特殊字符引起的（例如，at符号“@”应转义为“%40”）。但他没有将任何内容连接到URL中。这是我的观点。他正在使用POST。@ChrisG是的，你是对的，我仔细检查了代码并注意到了这一点。修复了我的答案，但保留了哈希建议（虽然还不安全，但这只是一个建议，不是法律）。