Попытка отправить данные формы html через xmlhttprequest

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.

Что вам нужно сделать, так это предотвратить обработку событий по умолчанию. Простой способ сделать это - добавить обработку отправки в ваш скрипт:

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

<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>

Answer 2

Вам нужно экранировать значения перед объединением их в строку запроса URL:

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

Во-вторых, я бы не рекомендовал передавать пароль напрямую через строку запроса.Безопасный способ его прохождения - солено-хешированный.