Lomakkeen lähetys AJAX:lla käyttäen FormDataa JavaScriptissä

FormData:n avulla voidaan lähettää automaattisesti kaikki lomakkeen kentät palvelimelle. Katsotaan kuinka tämä tehdään.

Oletetaan, että meillä on seuraava lomake, jossa syöttökentille on annettu name-attribuutit:

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

Lähetetään tämä lomake AJAX:in kautta. Aluksi haetaan viite lomakkeeseen muuttujaan:

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

Nyt määritellään pyynnön rungoksi datana FormData-olio. Ja annetaan itse oliolle parametrina viite lomakkeeseen:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // välitetään viite lomakkeeseen
	});
	
	event.preventDefault();
});

Tuloksena palvelimella voimme saada syöttökenttien arvot niiden nimien perusteella name-attribuuteista:

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

Annettu lomake, jossa on viisi syöttökenttää, joihin syötetään numeroita. Lähetä tämä lomake palvelimelle POST-metodilla. Olkoon palvelimen löydettävä syötettyjen numeroiden aritmeettinen keskiarvo ja lähetettävä tulos takaisin selaimelle.