Question

我正在尝试整理一个简单的登录提示，进行一些内部测试，我发现自己陷入困境。我有通过HTML进行的登录提示，我试图通过xmlhttprequest发送它。这是我的JS代码：

var xhr = new XMLHttpRequest();

function loginResults() {
  var loginUser = document.getElementById("username").value;
  var loginPass = document.getElementById("password").value;
  //console.log(loginUser + loginPass);
  xhr.open("post", "https://test.com/api/login/");
  var loginData = "username=" + loginUser + "&password=" + loginPass
  xhr.send(loginData);
  //console.log(loginData);
  xhr.addEventListener("readystatechange", processRequest, false);
}

function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
}

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

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

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

EDIT 以下是我的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>

Answer 1

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

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

＆＃13;

document.getElementById("isLogin").onsubmit = function(e) {
  e.preventDefault();
  // AJAX here
  console.log("form submission intercepted");
};

＆＃13;

<form name="isLogin" id="isLogin" method="post">
  <div class="container">
    <label for="username"><b>Email</b></label>
    <input type="text" id="username" value="test@test.com" name="username" required>
    <label for="password"><b>Password</b></label>
    <input type="password" id="password" value="test1234" name="password" required>
    <button id="submitLogin" type="submit">Login</button>
  </div>
</form>

＆＃13;

Answer 2

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

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

其次，我不建议直接通过querystring传递密码。通过它的安全方式最好是盐渍和散列。

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

2 个答案: