Адпраўка формы праз 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. Хай сервер знайдзе сярэдняе арыфметычнае ўведзеных лікаў і адправіць вынік назад у браўзэр.