Отправка POST-данных с помощью XMLHttpRequest

В приведённом ниже коде показано, как отправить POST-запрос с помощью XMLHttpRequest в JavaScript:

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);

// Отправляем правильную информацию заголовка вместе с запросом
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() { // Вызываем функцию при изменении состояния.
    if (http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

Если у вас есть объект, который вы хотите преобразовать в параметры для запроса, вы можете использовать следующий код:

var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;

// Преобразуем объект данных в массив закодированных пар ключ/значение для URL.
let urlEncodedData = "", urlEncodedDataPairs = [], name;
for (name in params) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(params[name]));
}

Этот код преобразует объект params в строку формата application/x-www-form-urlencoded, которая может быть использована в запросе.

Вот полное решение с использованием application-json:

<!-- Вводимые значения будут получены по ID -->
<input id="loginEmail" type="text" name="email" placeholder="Email">
<input id="loginPassword" type="password" name="password" placeholder="Password">

<!-- Кнопка вызова функции login() и предотвращения стандартного действия -->
<button onclick="return login()">Отправить</button>

<script>
    function login() {
        // Поля формы, см. ID выше
        const params = {
            email: document.querySelector('#loginEmail').value,
            password: document.querySelector('#loginPassword').value
        }

        const http = new XMLHttpRequest()
        http.open('POST', '/login')
        http.setRequestHeader('Content-type', 'application/json')
        http.send(JSON.stringify(params)) // Не забудьте сериализовать объект в строку
        http.onload = function() {
            // Выполните необходимые действия с ответом
            alert(http.responseText)
        }
    }
</script>

Убедитесь, что ваш Backend API может обрабатывать JSON.

Например, в Express JS:

import bodyParser from 'body-parser'
app.use(bodyParser.json())

Таким образом, вы сможете отправить данные формы на сервер в формате JSON.

Существует несколько дубликатов, касающихся этого вопроса, но никто не раскрывает его полностью. Я возьму пример из принятых ответов, чтобы проиллюстрировать.

http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');

Я немного упростил этот код (я использую http.onload(function() {}) вместо устаревшего метода, приведенного в этом ответе) ради ясности. Если вы используете этот код как есть, вы обнаружите, что ваш сервер, вероятно, интерпретирует тело POST-запроса как строку, а не как реальные параметры key=value (т.е. PHP не покажет никаких переменных $_POST). Вы должны установить заголовок формы, чтобы это работало, и сделать это перед вызовом http.send():

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Если вы используете JSON вместо URL-кодированных данных, установите заголовок application/json вместо этого.

Попробуйте использовать JSON-объект вместо FormData. Вот код, который работает для меня. FormData не помог мне, поэтому я пришел к этому решению.

var jdata = new Object();
jdata.level = levelVal; // level — это ключ, а levelVal — значение
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://MyURL", true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify(jdata));

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
}

Если вам не удается отправить данные с помощью FormData, использование JSON-объекта может стать хорошей альтернативой. Вы можете настроить необходимые ключи и значения, а затем просто преобразовать объект в строку JSON с помощью JSON.stringify(), что облегчит работу с сервером.

В вашем коде JavaScript используется объект util для работы с событиями и AJAX-запросами. Выглядит довольно отлично, но яалек вам перевести этот код на русский в формате ответа на вопрос на StackOverflow, чтобы было легче понять, что здесь происходит.

Ответ

Ваш код содержит несколько важных функций для работы с браузерными событиями и AJAX-запросами. Давайте разберем его шаг за шагом:

Объект util

1. getAttribute: Эта функция позволяет получить значение атрибута элемента DOM. Сначала проверяется, поддерживает ли объект метод getAttribute. Если нет, то проверяет, существует ли атрибут как свойство объекта.

2. addEvent: Используется для добавления обработчика событий. Функция сначала проверяет, доступен ли метод addEventListener, затем — attachEvent (для IE), и, если ничего из этого не помогает, назначает событие напрямую.

3. removeEvent: Удаляет обработчики событий. Работает аналогично addEvent, но вместо добавления удаляет обработчик.

4. getAjaxObject: Создает объект AJAX для выполнения запросов. Здесь используется XMLHttpRequest для современных браузеров и ActiveXObject для старых версий Internet Explorer.

Использование util

Вы используете getAjaxObject для создания нового xhr. Затем проверяется, поддерживает ли объект событие загрузки файлов, добавляются события для обработки прогресса загрузки, старта загрузки и прерывания.

Объект события xhrEvt

Этот объект содержит функции для обработки различных событий AJAX:

• onProgress: Событие, которое срабатывает во время загрузки файла.
• onLoadStart: Событие, срабатывающее при старте загрузки.
• onAbort: Событие, срабатывающее при прерывании загрузки.
• onReadyState: Основное событие, которое проверяет состояние готовности запроса. Если запрос завершен успешно, вы можете обработать полученные данные.

Отправка данных

При отправке данных проверяется поддержка FormData. Если FormData доступен, создается новый объект FormData, куда добавляются параметры user и pass. Если нет, данные отправляются в URL-кодированном формате.

xhr.open('POST', 'mypage.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Если вы хотите улучшить свою реализацию, стоит добавить обработку ошибок и более детальную обработку состояния загрузки. Кроме того, рекомендую использовать fetch для более современного подхода, если это возможно в вашем проекте.

Если у вас возникли дополнительные вопросы или потребуется помощь с каким-либо аспектом кода, не стесняйтесь спрашивать!