В этом руководстве вы узнаете о JavaScript FormData API и о том, как создавать объекты и публиковать FormData с помощью fetch API.
Предположим, у вас есть форма подписки с двумя полями имя и адрес электронной почты.
<form action="subscribe.php" method="post" id="subscription"> <div> <label for="name">Name:</label> <input type="text" name="name" id="name"/> </div> <div> <label for="email">Email:</label> <input type="email" name="email" id="email"/> </div> <div> <button type="submit" id="submit">Subscribe</button> </div> </form>
Когда вы нажимаете кнопку отправки, веб-браузер отправляет значения полей имени и электронной почты в форме на сервер. Точно так же интерфейс FormData
позволяет создавать набор пар ключ/значение, представляющих поля формы и их значения в JavaScript.
Имея объект FormData
, вы можете отправить его на сервер с помощью API выборки. Если вы хотите отправить форму, как если бы это был запрос GET, вы можете передать объект в конструктор URLSearchParams
.
Создание объекта
Следующий код создает новый объект FormData
из элемента формы HTML:
const formData = new FormData(form);
Следующий скрипт показывает значения объекта FormData
:
const btn = document.querySelector('#submit'); const form = document.querySelector('#subscription'); btn.addEventListener('click', (e) = > { // prevent the form from submitting e.preventDefault(); // show the form values const formData = new FormData(form); const values = [...formData.entries()]; console.log(values); });
Как это работает.
- Сначала выберите кнопку отправки, используя метод
querySelector()
объектаdocument
. - Затем добавьте обработчик событий для обработки события нажатия кнопки отправки.
- Затем вызовите метод
preventDefault()
объекта события, чтобы избежать отправки формы. - После этого создайте новый объект
FormData
из элемента формы. - Наконец, вызовите метод entry() объекта FormData. Поскольку метод entry() возвращает итератор, вы должны использовать оператор спреда(
...
).
Методы
Объект FormData
имеет следующие методы:
Метод append()
Метод append()
имеет две формы:
FormData.append(name, value) FormData.append(name, value, file)
Метод append()
добавляет новое значение к существующему ключу внутри объекта FormData или добавляет ключ, если он не существует.
Метод delete()
FormData.delete(name);
Метод delete()
удаляет пару ключ/значение по имени ключа из объекта FormData.
Метод entries()
FormData.entries()
Метод entries()
возвращает итератор всех пар ключ/значение в объекте FormData.
Метод get()
FormData.get(name)
Метод get()
возвращает первое значение по имени ключа.
Метод getAll()
FormData.getAll(name)
Метод getAll()
возвращает массив всех значений по имени ключа.
Метод has()
FormData.has(name);
Метод has()
возвращает значение true, если объект FormData содержит имя ключа.
Метод keys()
FormData.keys()
Метод keys()
возвращает итератор всех ключей.
Метод set()
Метод set() имеет две формы:
FormData.set(name, value); FormData.set(name, value, filename);
Метод set()
устанавливает новое значение для существующего имени ключа или добавляет ключ/значение, если оно еще не существует.
Метод values()
FormData.values()
Метод values()
возвращает итератор всех значений в объекте FormData.
Отправка с помощью API выборки
Мы создадим простую форму подписки, которая использует FetchAPI для отправки объекта FormData на сервер.
Ниже показано, как отправить FormData
с помощью API выборки:
const btn = document.querySelector('#submit'); const form = document.querySelector('#subscription'); const messageEl = document.querySelector('#message'); btn.addEventListener('click', (e) => { e.preventDefault(); subscribe(); }); const subscribe = async () => { try { let response = await fetch('subscribe.php', { method: 'POST', body: new FormData(form), }); const result = await response.json(); showMessage(result.message, response.status == 200 ? 'success' : 'error'); } catch (error) { showMessage(error.message, 'error'); } }; const showMessage = (message, type = 'success') => { messageEl.innerHTML = ` <div class="alert alert-${type}"> ${message} </div> `; };
В этом примере мы определяем функцию с именем subscribe() и вызываем ее в прослушивателе событий щелчка кнопки отправки. Функция subscribe()
является асинхронной, поскольку использует ключевое слово await
.
Внутри функции subscribe()
:
- Во-первых, отправьте данные формы в скрипт subscribe.php, используя метод
fetch()
:
let response = await fetch('subscribe.php', { method: 'POST', body: new FormData(form), });
- Во-вторых, получите ответ JSON, вызвав метод
json()
объектаresponse
:
const result = await response.json();
- В-третьих, показать сообщение об успешном выполнении, если код состояния HTTP равен 200. В противном случае отобразить сообщение об ошибке. Свойство
message
result
хранит сообщение об успехе или ошибке.
showMessage(result.message, response.status == 200 ? 'success' : 'error');
- Наконец, определите
showMessage()
, которая отображает сообщение об успехе или ошибке:
const showMessage = (message, type = 'success') => { messageEl.innerHTML = ` <div class="alert alert-${type}"> ${message} </div> `; };
Получение нового объекта FormData
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/style.css" /> <title>JavaScript FormData Demo</title> </head> <body> <main> <div id="message"></div> <form action="subscribe.php" method="post" id="subscription"> <div> <label for="name">Name:</label> <input type="text" name="name" id="name"/> </div> <div> <label for="email">Email:</label> <input type="email" name="email" id="email"/> </div> <div> <button type="submit" id="submit">Subscribe</button> </div> </form> </main> <script src="js/app.js"></script> </body> </html>
app.js
const btn = document.querySelector('#submit'); const form = document.querySelector('#subscription'); const messageEl = document.querySelector('#message'); btn.addEventListener('click', (e) => { e.preventDefault(); subscribe(); }); const subscribe = async () => { try { let response = await fetch('subscribe.php', { method: 'POST', body: new FormData(form), }); const result = await response.json(); showMessage(result.message, response.status == 200 ? 'success' : 'error'); } catch (error) { showMessage(error.message, 'error'); } }; const showMessage = (message, type = 'success') => { messageEl.innerHTML = ` <div class="alert alert-${type}"> ${message} </div> `; };
Заключение
- Используйте JavaScript FormData API для захвата значений формы HTML.
- Используйте Fetch API для отправки
FormData
на сервер.