Odosielanie formulára cez AJAX pomocou FormData v JavaScripte

Pomocou FormData môžeme automaticky odoslať všetky polia formulára na server. Pozrime sa, ako sa to robí.

Nech máme nasledujúci formulár, v ktorom majú vstupy atribúty name:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

Pošlime tento formulár cez AJAX. Na začiatok získame odkaz na formulár do premennej:

let form = document.querySelector('form');

Teraz v tele požiadavky ako údaje zadáme objekt FormData. A samotnému objektu ako parameter odovzdáme odkaz na formulár:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // odovzdáme odkaz na formulár
	});
	
	event.preventDefault();
});

V dôsledku toho na serveri budeme môcť získať hodnoty vstupov podľa ich mien z atribútov name:

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

Daný formulár s piatimi vstupmi, do ktorých sa vkladajú čísla. Odošlite tento formulár na server metódou POST. Nech server nájde aritmetický priemer zadaných čísel a odošle výsledok späť do prehliadača.