Odesílání formuláře pomocí AJAX a FormData v JavaScriptu

Pomocí FormData lze automaticky odeslat všechna pole formuláře na server. Podívejme se, jak se to dělá.

Předpokládejme, že máme následující formulář, kde mají vstupní pole atributy name:

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

Pojďme tento formulář odeslat pomocí AJAX. Nejprve získáme odkaz na formulář do proměnné:

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

Nyní v těle požadavku jako data zadejme objekt FormData. A samotnému objektu předáme jako parametr odkaz na formulář:

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

V důsledku toho budeme moci na serveru získat hodnoty vstupních polí podle jejich jmen z atributů name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'data formuláře přijata';
	}
}

Je dán formulář s pěti vstupními poli, do kterých se zadávají čísla. Odešlete tento formulář na server metodou POST. Nechť server najde aritmetický průměr zadaných čísel a pošle výsledek zpět do prohlížeče.