Отправка формы через 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. Пусть сервер найдет среднее арифметическое введенных чисел и отправит результат обратно в браузер.