Слање образаца преко 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. Нека сервер пронађе аритметичку средину унетих бројева и пошаље резултат натраг у прегледач.