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();
});
Таким образом, вы сами решаете, как обрабатывать и куда перенаправлять данные формы.
Полезные материалы
- Использование Fetch API – Web APIs | MDN
- Fetch | JavaScript.info
- Использование Fetch | CSS-Tricks – CSS-Tricks
- Индикаторы прогресса загрузки для fetch? – Stack Overflow
- Полифилл для window.fetch – JakeChampion/fetch
- Работа с объектами FormData – Web APIs | MDN
- Продвинутые возможности Fetch API и обработка ошибок – fetch API – Блог Дэвида Уолша