В этом руководстве вы узнаете о 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. В противном случае отобразить сообщение об ошибке. Свойство
messageresultхранит сообщение об успехе или ошибке.
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на сервер.