Formularversand via AJAX mit FormData JavaScript

Mit FormData können automatisch alle Formularfelder an den Server gesendet werden. Schauen wir uns an, wie das gemacht wird.

Nehmen wir an, wir haben das folgende Formular, in dem die Inputs die Attribute name haben:

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

Lassen Sie uns dieses Formular via AJAX senden. Holen wir zuerst einen Verweis auf das Formular in eine Variable:

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

Jetzt geben wir im Request-Body als Daten das Objekt FormData an. Und übergeben dem Objekt selbst als Parameter den Verweis auf das Formular:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // übergeben den Verweis auf das Formular
	});
	
	event.preventDefault();
});

Als Ergebnis können wir auf dem Server die Werte der Inputs anhand ihrer Namen aus den Attributen name erhalten:

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

Gegeben ist ein Formular mit fünf Inputs, in die Zahlen eingegeben werden. Senden Sie dieses Formular an den Server mit der POST-Methode. Der Server soll das arithmetische Mittel der eingegebenen Zahlen finden und das Ergebnis zurück an den Browser senden.