# Отправка формы через AJAX с помощью FormData JavaScript

С помощью `FormData` можно автоматически отправить все поля формы на сервер. Давайте посмотрим, как это делается.

Пусть у нас есть следующая форма, в которой инпутам даны атрибуты `name`:

`<form action="" method="GET"> <input name="num1"> <input name="num2"> <input type="submit"> </form>`

Давайте отправим эту форму через AJAX. Для начала получим ссылку на форму в переменную:

`let form = document.querySelector('form');`

Теперь в теле запроса в качестве данных укажем объект `FormData`. А самому объекту параметром передадим ссылку на форму:

`form.addEventListener('submit', function(event) { let promise = fetch('/handler/', { method: 'POST', body: new FormData(this) // передаем ссылку на форму }); event.preventDefault(); });`

В результате на сервере мы сможем получить значения инпутов по их именам из атрибутов `name`:

`export default { '/handler/': function({post}) { console.log(post.num1); console.log(post.num2); return 'form data received'; } }`

Дана форма с пятью инпутами, в которые вводятся числа. Отправьте эту форму на сервер методом POST. Пусть сервер найдет среднее арифметическое введенных чисел и отправит результат обратно в браузер.

←→
↑
en ru