Fetch API: отправка данных формы в формате x-www-form-urlencoded

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

Для отправки данных из формы при помощи Fetch API, создайте экземпляр FormData и передайте его в функцию fetch, указав при этом метод 'POST'. В качестве примера можно привести следующий код, использующий Express:

const form = new FormData(document.querySelector('#myForm'));
fetch('/submit', { method: 'POST', body: form })
  .then(response => response.json()) 
  .then(console.log) 
  .catch(console.error);

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

Преобразование FormData в URLSearchParams

Если же вам необходимо отправить данные в формате application/x-www-form-urlencoded, который является более экономичным с точки зрения трафика, отличным решением будет преобразование FormData в URLSearchParams:

const formData = new FormData(document.querySelector('#yourForm'));
const searchParams = new URLSearchParams();

for (const [key, value] of formData) {
  searchParams.append(key, value);
}

fetch('/submit', {
  method: 'POST',
  body: searchParams
})
.then(response => response.json()) 
.then(data => console.log(data)) 
.catch(error => console.error(error));

Этот подход позволит вам эффективно кодировать данные и гладко интегрировать их с Fetch API.

Настройка заголовков fetch для URLSearchParams

При использовании URLSearchParams не забудьте указать соответствующий заголовок Content-Type:

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' 
  },
  body: searchParams
});

Такая настройка заголовков гарантирует оптимальное взаимодействие между сервером и клиентским приложением.

Ручное управление данными формы

Вы можете достичь почти полного контроля над управлением данными формы, используя HTMLFormElement.elements и перебирая элементы формы:

const formElement = document.querySelector('#yourForm');
const data = {};

for (const element of formElement.elements) {
  if (element.name) {
    data[element.name] = element.value;
  }
}

const searchParams = new URLSearchParams(data);

fetch('/submit', {
  method: 'POST',
  body: searchParams
});

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

Защита формы

Не забывайте обеспечивать безопасность форм в интернете, используя для этого CSRF-токены:

formData.append('csrf_token', 'yourCsrfTokenHere');

Если добавить CSRF-токен, отправка данных через fetch станет более безопасной.

Соответствие клиентского кода серверным ожиданиям

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

formData.append('name', 'John Doe');
formData.append('age', '30');

Таким образом, вы обеспечиваете синхронизацию клиентской и серверной частей и создаёте надёжную систему обмена данными.

Асинхронная обработка ответов

Очень удобно работать с ответами от fetch, используя async/await:

async function submitForm(formElement) {
  const formData = new FormData(formElement);

  try {
    const response = await fetch('/submit', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

submitForm(document.querySelector('#yourForm'));

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

Отладка сетевых запросов

Используйте инструменты разработчика в браузере для просмотра и отладки сетевых запросов. Это поможет вам убедиться в корректности передачи данных.

Отказ от jQuery

Современные возможности JavaScript делают его более предпочтительным для сериализации форм, нежели использование jQuery:

const formData = new FormData(document.querySelector('#yourForm'));
new URLSearchParams(formData).toString();

Fetch API и FormData предоставляют всю необходимую функциональность без использования дополнительных библиотек, ранее предлагаемых jQuery.

Адаптация к динамическим полям формы

Если форма должна поддерживать динамически добавляемые поля, просто добавьте их в FormData:

formData.append('newField', 'newValue');

Fetch API предоставляет широкие возможности для работы с динамически изменяемыми формами.

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

Представим процесс отправки данных из формы через Fetch API схематически:

1️⃣ (Данные формы) + 2️⃣ (Fetch API) = 3️⃣ (Сервер)

const formData = new FormData(yourFormElement);

fetch('/submit-form', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

На данной схеме данные формы обозначены как 1️⃣, вызов Fetch API — как 2️⃣, а серверное получение данных — как 3️⃣.

Знакомство с FormData.entries()

Метод FormData.entries() позволяет легко преобразовать данные формы в массив пар ключ-значение, что упрощает их последующую обработку перед отправкой.

Прямое управление над отправкой формы

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

formElement.addEventListener('submit', function(event) {
  event.preventDefault();
});

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

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

1. Использование Fetch API – Web APIs | MDN
2. Fetch | JavaScript.info
3. Использование Fetch | CSS-Tricks – CSS-Tricks
4. Индикаторы прогресса загрузки для fetch? – Stack Overflow
5. Полифилл для window.fetch – JakeChampion/fetch
6. Работа с объектами FormData – Web APIs | MDN
7. Продвинутые возможности Fetch API и обработка ошибок – fetch API – Блог Дэвида Уолша