Vormi saatmine AJAX-i kaudu FormData abil JavaScriptis

Abil FormData saab automaatselt kõik vormi väljad saata serverile. Vaatame, kuidas seda teha.

Olgu meil järgmine vorm, kus sisenditele on antud atribuudid name:

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

Saadame selle vormi AJAX-i kaudu. Alustuseks hankime vormile viida muutujasse:

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

Nüüd määrame päringu kehas andmetena objekti FormData. Ja edastame objektile parameetrina viida vormile:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // edastame viida vormile
	});
	
	event.preventDefault();
});

Tulemusena saame serveris sisendite väärtused kätte nende nimede järgi atribuutidest name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'vormi andmed vastu võetud';
	}
}

Antud on vorm viie sisendiga, kuhu sisestatakse numbrid. Saadake see vorm serverile POST meetodil. Olgu serveril ülesandeks leida sisestatud numbrite aritmeetiline keskmine ja saata tulemus tagasi brauserisse.