JS FormData: как использовать для отправки данных с формы

FormData - это инструмент, который позволяет легко собирать информацию из формы и отправлять ее на сервер. Объект FormData используется для создания объектов, которые содержат пары ключ-значение, представляющие поля формы и их значения.

Пример использования FormData:

При отправке формы методом POST на сервер можно использовать следующий код:

javascript
let form = document.querySelector('form');
let formData = new FormData(form);
let xhr = new XMLHttpRequest();
xhr.open('POST', '/server/update-profile');
xhr.send(formData);

В данном примере мы выбираем форму с помощью метода querySelector, создаем объект FormData и передаем ему выбранную форму. Затем мы создаем объект XMLHttpRequest с помощью метода open и отправляем запрос на сервер с помощью метода send.

Методы FormData:

• append(name, value) - добавляет пару ключ-значение в объект FormData. Если указанный ключ уже существует, значение будет дополнено, а не заменено.

javascript
let formData = new FormData();
formData.append('username', 'John');
formData.append('email', 'john@example.com');

• delete(name) - удаляет указанное значение из объекта FormData.

javascript
formData.delete('email');

• get(name) - возвращает первое значение указанного ключа.

javascript
formData.get('username'); // 'John'

• getAll(name) - возвращает все значения указанного ключа в виде массива.

javascript
formData.getAll('age'); // [ '20', '21' ]

• has(name) - возвращает true, если указанный ключ существует в объекте FormData.

javascript
formData.has('email'); // false

В заключение, объект FormData является удобным и мощным инструментом для работы с формами в JavaScript. Он позволяет легко собирать и отправлять информацию на сервер, а также имеет удобные методы для работы с ее значениями.