06 Июл 2023
2 мин
1474

Отправка POST-запроса в JavaScript как отправка формы

Когда будет речь о перенаправлении браузера на другую страницу, одним из распространенных способов является использование GET-запроса. Он выглядит

Содержание

Когда будет речь о перенаправлении браузера на другую страницу, одним из распространенных способов является использование GET-запроса. Он выглядит примерно так:

document.location.href = 'http://example.com/q=a';

Однако, в некоторых случаях, ресурс, к которому происходит обращение, может корректно отвечать только на POST-запросы. Если мы не генерируем такой запрос динамически, то можем использовать HTML-форму следующего вида:

<form action="http://example.com/" method="POST">
    <input type="hidden" name="q" value="a">
</form>

А затем просто отправить эту форму из DOM. Но что если мы хотим использовать JavaScript для отправки такого запроса? Как выглядит код, который позволяет выполнить что-то вроде этого:

post_to_url('http://example.com/', {'q':'a'});

Нужно учесть, что требуется решение, которое изменяет текущий URL браузера, аналогично отправке формы. Если это возможно с использованием XMLHttpRequest, то это не очевидно. Это не должно быть асинхронным и использовать XML, поэтому Ajax здесь не подходит.

Лучший кросс-браузерный подход предполагает создание формы с помощью JavaScript, добавление ее в DOM, а затем ее отправку. Вот как это выглядит:

function post_to_url(path, params) {
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = path;

    for(let key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.type = 'hidden';
            hiddenField.name = key;
            hiddenField.value = params[key];

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

В этом коде создается новая форма с указанным путем и методом POST. Затем, для каждого ключа в переданном параметре, создается новое скрытое поле ввода и добавляется в форму. После этого форма добавляется в тело документа и отправляется. Именно так можно реализовать POST-запрос, похожий на отправку формы, с использованием JavaScript.

Содержание

Добавить комментарий

Определи профессию по рисунку