Pošiljanje obrazca prek AJAX z uporabo FormData v JavaScriptu

Z FormData lahko samodejno pošljemo vsa polja obrazca na strežnik. Poglejmo, kako se to naredi.

Recimo, da imamo naslednji obrazec, kjer so vnosnim poljem dodeljeni atributi name:

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

Pošljimo ta obrazec prek AJAX. Za začetek pridobimo povezavo do obrazca v spremenljivko:

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

Zdaj v telesu zahteve kot podatke navedemo objekt FormData. Samemu objektu kot parameter posredujemo povezavo do obrazca:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // posredujemo povezavo do obrazca
	});
	
	event.preventDefault();
});

Kot rezultat bomo na strežniku lahko pridobili vrednosti vnosnih polj po njihovih imenih iz atributov name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'podatki obrazca prejeti';
	}
}

Podan je obrazec s petimi vnosnimi polji, v katera se vnašajo števila. Pošljite ta obrazec na strežnik z metodo POST. Naj strežnik poišče aritmetično sredino vnesenih števil in pošlje rezultat nazaj v brskalnik.