Метод POST через FormData в AJAX в PHP

Давайте теперь будем передавать данные методом POST с помощью класса FormData. Для начала давайте напишем базовый пример отправки формы. Будем добавлять данные через метод set:

form.addEventListener('submit', async function(event) {
	let num1 = this.querySelector('[name="num1"]').value;
	let num2 = this.querySelector('[name="num2"]').value;
	
	let formData = new FormData();
	formData.set('num1', num1);
	formData.set('num2', num2);
	
	let response = await fetch('/ajax.php', {
		method: 'POST',
		body: formData,
	});
	
	event.preventDefault();
});

Класс FormData позволяет упростить приведенный выше код в том случае, когда мы хотим отправить на сервер все поля формы. В этом случае можно передать ссылку на форму в конструктор класса FormData. В результате значения всех полей формы будут получены автоматически:

form.addEventListener('submit', async function(event) {
	let formData = new FormData(this); // this указывает на форму
	
	let response = await fetch('/ajax.php', {
		method: 'POST',
		body: formData,
	});
	
	event.preventDefault();
});

Можно переписать код еще компактнее:

form.addEventListener('submit', async function(event) {
	let response = await fetch('/ajax.php', {
		method: 'POST',
		body: new FormData(this), // сразу передадим объект в body
	});
	
	event.preventDefault();
});

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