Űrlap küldése AJAX-al FormData segítségével JavaScriptben

A FormData segítségével automatikusan elküldhetjük az űrlap összes mezőjét a szerverre. Nézzük meg, hogyan is történik ez.

Tegyük fel, hogy a következő űrlapunk van, amelyben a bemeneti mezőknek megadtuk a name attribútumokat:

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

Küldjük el ezt az űrlapot AJAX-al. Kezdetben szerezzük meg az űrlapra mutató hivatkozást egy változóba:

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

Most a kérés törzsében, adatként adjuk meg a FormData objektumot. Magának az objektumnak pedig paraméterként adjuk át az űrlapra mutató hivatkozást:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // átadjuk az űrlapra mutató hivatkozást
	});
	
	event.preventDefault();
});

Ennek eredményeképpen a szerveren meg tudjuk kapni a bemeneti mezők értékeit azok nevei alatt, amelyeket a name attribútumban adtunk meg:

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

Adott egy öt bemeneti mezőt tartalmazó űrlap, amelybe számokat írhatunk. Küldje el ezt az űrlapot a szerverre POST metódussal. A szerver keresse meg a beírt számok számtani közepét és küldje vissza az eredményt a böngészőbe.