FormData API в JavaScript: создание объекта и отправка данных

В этом руководстве вы узнаете о 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 на сервер.
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript