Отправка POST-данных при редиректе в JavaScript и jQuery

Быстрый ответ

Давайте узнаем, как отправить POST-запрос и выполнить переадресацию через JavaScript. Вот простой пример кода, решающий эту задачу:

fetch('ВАШ_ЭНДПОИНТ', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ ключ: 'значение' })
})
.then(response => {
  if (response.ok) window.location.href = 'URL_ПЕРЕАДРЕСАЦИИ';
})
.catch(console.error);

Данный код асинхронно отправляет данные методом POST на указанный вами эндпоинт. После того как получен успешный ответ от сервера, выполняется переадресация по указанному URL.

Отправка данных с использованием скрытой формы

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

function postToUrl(path, params, method = "post") {
  const form = document.createElement("form");
  form.method = method;
  form.action = path;

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

      form.appendChild(hiddenField);
    }
  }

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

postToUrl('URL_ПЕРЕАДРЕСАЦИИ', { Return_URL: 'RETURN_URL', Username: 'ИМЯ_ПОЛЬЗОВАТЕЛЯ' });

Такой подход делает переход для пользователя максимально плавным, так как передача данных и переадресация происходят ненавязчиво и незаметно.

Редирект в стиле рок-звезд

Порой перед нами встают специфические задачи. Они могут быть связаны с политикой CORS или потребовать расширенной функциональности. В таких случаях может оказаться полезным использование библиотеки Axios или метода $.post() из jQuery, расширенного с помощью $.extend:

$.extend({
  redirectPost: function(location, args) {
    var form = $.map(args, function(value, key) {
      return `<input type="hidden" name="${key}" value="${value}">`;
    }).join('');
    $(`<form action="${location}" method="POST">${form}</form>`).appendTo('body').submit();
  }
});

$.redirectPost('URL_ПЕРЕАДРЕСАЦИИ', { Return_URL: 'RETURN_URL', Username: 'ИМЯ_ПОЛЬЗОВАТЕЛЯ' });

Для тех, кто предпочитает работать с jQuery, плагин jquery.redirect облегчает процесс POST-переадресации до банальной операции:

$.redirect('URL_ПЕРЕАДРЕСАЦИИ', { Return_URL: 'RETURN_URL', Username: 'ИМЯ_ПОЛЬЗОВАТЕЛЯ' }, "POST");

И главное – безопасность!

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

Визуализация

🏃‍♂️💼🔄🚪🌐

• Бегущий человек (🏃‍♂️) – это ваш JavaScript, готовый к выполнению задачи.
• Портфель (💼) – это POST-данные, набитые важной информацией.
• Значок переадресации (🔄) символизирует момент перенаправления пользователя.
• Дверь (🚪) – это эндпоинт, который ожидает POST-данные.
• Иконка веба (🌐) представляет сервер, куда направляются данные для последующей обработки.

Полезные материалы

1. Использование Fetch API – Веб-API | MDN — подробное описание отправки POST-запросов через JavaScript.
2. jQuery.post() | Документация по jQuery API — раскройте секреты использования метода .post() в jQuery для AJAX-запросов.
3. GitHub – axios/axios: Promise based HTTP client for the browser and node.js — репозиторий Axios, библиотеки для HTTP-запросов основанной на промисах.
4. Атрибут method HTML формы — обзор атрибута method для HTML-форм.
5. Перенаправления в HTTP – HTTP | MDN — всесторонний обзор перенаправлений в HTTP.
6. Express 4.x – Справочник API — короткий обзор работы с POST-запросами с помощью Node.js и фреймворка Express.
7. Cross-Origin Resource Sharing (CORS) – HTTP | MDN — подробное объяснение специфики работы с CORS, часто встречающейся в веб-разработке.