Formulier verzenden via AJAX met FormData JavaScript

Met FormData kunnen automatisch alle formuliervelden naar de server worden verzonden. Laten we eens kijken hoe dat werkt.

Stel dat we het volgende formulier hebben, waarin de inputs de attributen name hebben gekregen:

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

Laten we dit formulier via AJAX verzenden. Om te beginnen halen we een verwijzing naar het formulier in een variabele:

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

Nu geven we in de body van het verzoek als gegevens het object FormData op. En we geven aan het object zelf als parameter een verwijzing naar het formulier:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // geven een verwijzing naar het formulier door
	});
	
	event.preventDefault();
});

Als resultaat kunnen we op de server de waarden van de inputs ophalen via hun namen uit de attributen name:

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

Gegeven een formulier met vijf inputs, waarin getallen worden ingevoerd. Verzend dit formulier naar de server via de POST-methode. Laat de server het rekenkundig gemiddelde van de ingevoerde getallen vinden en het resultaat terugsturen naar de browser.