Sending av skjema via AJAX ved hjelp av FormData JavaScript

Med FormData kan du automatisk sende alle skjemafeltene til serveren. La oss se hvordan dette gjøres.

La oss si at vi har følgende skjema, der input-feltene har attributtene name:

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

La oss sende dette skjemaet via AJAX. Til å begynne med, la oss hente en referanse til skjemaet i en variabel:

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

Nå kan vi i forespørselens kropp som data angi et FormData-objekt. Og til selve objektet overfører vi en referanse til skjemaet som parameter:

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

Som et resultat vil vi på serveren kunne få verdiene fra input-feltene ved deres navn fra name-attributtene:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'skjemadata mottatt';
	}
}

Det er gitt et skjema med fem input-felter, der tall skrives inn. Send dette skjemaet til serveren med POST-metoden. La serveren finne det aritmetiske gjennomsnittet av de innskrevne tallene og sende resultatet tilbake til nettleseren.