Skicka formulär via AJAX med FormData JavaScript

Med FormData kan du automatiskt skicka alla formulärfält till servern. Låt oss se hur det görs.

Låt oss säga att vi har följande formulär, där inputfälten har attributen name:

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

Låt oss skicka detta formulär via AJAX. Först låt oss hämta en referens till formuläret i en variabel:

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

Nu, i förfrågans body, anger vi ett FormData-objekt som data. Och till själva objektet skickar vi en referens till formuläret som en parameter:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // skickar en referens till formuläret
	});
	
	event.preventDefault();
});

Som ett resultat kommer vi på servern att kunna få inputvärdena efter deras namn från attributen name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'formulärdata mottagen';
	}
}

Ett formulär med fem inputfält ges, i vilka siffror matas in. Skicka detta formulär till servern med POST-metoden. Låt servern hitta det aritmetiska medelvärdet av de inmatade talen och skicka tillbaka resultatet till webbläsaren.