Без переадресации: отправка HTML-формы с jQuery/JavaScript

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

Для того чтобы осуществить отправку HTML-формы, не выполняя перенаправление страницы, применяют AJAX и API fetch в JavaScript. Встроенный в JavaScript API fetch используется для перехвата события отправки и передачи данных формы. Посмотрим на пример кода:

document.querySelector('form').onsubmit = event => {
  event.preventDefault(); // Останавливаем стандартное поведение
  fetch(event.target.action, {
    method: 'POST', // Используем метод POST
    body: new FormData(event.target) // Собираем данные формы
  })
  .then(response => response.json())
  .then(data => console.log('Успех:', data)) // Обработка отклика
  .catch(error => console.error('Ошибка:', error)); // Обработка потенциальных ошибок
};

Такой подход позволяет реализовывать асинхронные POST-запросы, при этом пользователь остаётся на текущей странице.

Практические решения и полезные альтернативы

API fetch представляет собой современный и удобный способ отправки форм без перенаправления страницы. Посмотрим на другие методы в JavaScript, а также обсудим возможные проблемы, с которыми вы можете столкнуться.

Решение с использованием iframe

Устанавливая атрибут target у формы по значению имени невидимого iframe, можно добиться того, что данные будут отправляться в iframe, что предотвратит перенаправление страницы:

<iframe name="hiddenFrame" style="display:none;"></iframe>
<form action="/submit-form" method="post" target="hiddenFrame">
  <!-- Элементы формы -->
</form>

Подробнее об этом расскажет наш спикер на видео

Отправка формы при помощи jQuery Ajax

Сохранение формы через jQuery может быть выполнено прямо с помощью метода .ajax():

$('form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      alert('Форма успешно отправлена!');
    }
  });
});

Работа с FormData и XMLHttpRequest

Использование FormData в паре с XMLHttpRequest предоставляет полный контроль над процессом отправки:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function () {
  alert('Форма успешно отправлена!');
};
var formData = new FormData(document.querySelector('form'));
xhr.send(formData);

Управление атрибутами формы при динамическом использовании

При реализации отправки нескольких форм через AJAX, управление атрибутами формы в динамике может оказаться очень полезным:

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  var form = $(this).closest('form');
  var actionUrl = form.attr('action');
  // Дальнейшая работа с AJAX и использование `actionUrl`
});

Значимость обеспечения безопасности формы

Всегда используйте атрибут method="post" для безопасной передачи данных, особенно когда речь идёт о конфиденциальной информации.

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

Традиционная отправка формы HTML создаёт ассоциацию с запуском бумажного самолётика:

Обычно после броска самолётика вы бежите следом за ним.

Но при использовании XMLHttpRequest или fetch картина меняется:

1. Вы запускаете самолётик и продолжаете стоят в наблюдении за его полётом, не перенаправляясь на другую страницу.

Рассмотрим еще подробнее:

Без перенаправления: [🧍] отправляет [✈️], отдыхает [🏖️]
С перенаправлением: [🧍] следует за [✈️], достигает [🚀]

Оставайтесь на месте. Отпустите форму — позвольте ей "лететь" самостоятельно!

Распространённые проблемы и способы их решения

Отправка форм без перенаправления страницы кажется простой задачей, до тех пор пока не сталкиваетесь с проблемами. Но решение есть для всего.

Информирование пользователя о статусе отправки

После отправки необходимо донести до пользователя информацию об изменении статуса. Для этого можно использовать callback-функции в AJAX или метод .then() в fetch. Это позволит реализовать систему уведомлений и обновление интерфейса.

Валидация формы

Валидация форм на стороне клиента перед отправкой — обязательный этап. Можно проверять каждое поле в отдельности или использовать библиотеки, такие как Formik в React, для управления процессом валидации.

Зависимость от JavaScript

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

Кроссбраузерная совместимость

Необходимо гарантировать поддержку вашего способа отправки формы в различных браузерах, даже в старых версиях.

Лучшие практики и заключительные мысли

• Выбирайте инструментарий, которым удобнее пользоваться: jQuery для упрощения разработки или чистый JS для работы без зависимостей.
• Скрыть iframe как можно лучше, чтобы его отображение не влияло на внешний вид страницы после отправки.
• Используйте надёжные URL-адреса для action формы.
• Давайте предпочтение ненавязчивому JavaScript для привязки событий и избегайте лишней "перегрузки" HTML.

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

1. Введение в AJAX — Обучение эффективному использованию AJAX для отправки форм без перенаправления страницы.
2. Fetch API – Веб-API | MDN — Использование Fetch API для асинхронной отправки формы.
3. Обзор | Formik — Обзор возможностей библиотеки Formik для работы с формами в React.
4. GitHub – axios/axios: Запросы на основе Promises для браузера и node.js — Axios для отправки HTTP запросов в приложениях JavaScript.
5. Event: preventDefault() method – Веб-API | MDN — Как использовать preventDefault для предонвращения перенаправления страницы.
6. FormData – Веб-API | MDN — Объект FormData для создания и отправления данных формы.