Afsendelse af formular via AJAX ved hjælp af FormData JavaScript

Med FormData kan du automatisk sende alle formularfelter til serveren. Lad os se, hvordan det gøres.

Lad os sige, at vi har følgende formular, hvor inputfelterne har attributterne name:

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

Lad os sende denne formular via AJAX. Til at starte med, lad os hente en reference til formulareren i en variabel:

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

Nu skal vi i anmodningens krop angive et objekt af FormData som data. Og vi giver objektet en reference til formularen som parameter:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // sender reference til formularen
	});
	
	event.preventDefault();
});

Som et resultat kan vi på serveren få værdierne fra inputfelterne via deres navne fra name attributterne:

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

Der er givet en formular med fem inputfelter, hvor der indtastes tal. Send denne formular til serveren med POST-metoden. Lad serveren finde det aritmetiske gennemsnit af de indtastede tal og sende resultatet tilbage til browseren.