Отправка данных методом POST в AJAX

Формы можно оправлять не только методом GET, но и методом POST. Для этого в настройках функции fetch нужно указать соответствующий метод:

let promise = fetch('/handler/', {
	method: 'POST',
});

Данные формы нужно передать в настройке body в виде объекта FormData:

let promise = fetch('/handler/', {
	method: 'POST',
	body: new FormData(),
});

При этом нам не нужно вручную получать данные полей формы. Мы можем просто передать ссылку на форму параметром конструктора FormData:

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

Допишем наш код:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this),
	}).then(
		response => {
			return response.text(); // ответ сервера
		}
	).then(
		text => {
			console.log(text);
		}
	);
	
	event.preventDefault();
});

Выведем в консоль сервера отправленные данные:

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

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

Отправка данных без формы

Наличие формы не обязательно. Мы можем просто сформировать данные и отправить их методом POST:

let formData = new FormData();
formData.set('num1', '1');
formData.set('num2', '2');

let promise = fetch('/handler/', {
	method: 'POST',
	body: formData,
});

Дан объект с данными:

let obj = {
	a: 1,
	b: 2,
	c: 3
}

С помощью цикла сформируйте из этого объекта объект formData и отправьте его на сервер методом POST.