Formos siuntimas per AJAX naudojant FormData JavaScript

Naudojantis FormData galima automatiškai išsiųsti visus formos laukus į serverį. Pažiūrėkime, kaip tai daroma.

Tarkime, kad turime tokią formą, kurios įvesties laukams suteikti atributai name:

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

Išsiųskime šią formą per AJAX. Pirmiausia gaukime nuorodą į formą į kintamąjį:

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

Dabar užklausos kūne kaip duomenis nurodykime FormData objektą. O pačiam objektui parametru perduokime nuorodą į formą:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // perduodame nuorodą į formą
	});
	
	event.preventDefault();
});

Dėl to serveryje galėsime gauti įvesties laukų reikšmes pagal jų pavadinimus iš name atributų:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'formos duomenys gauti';
	}
}

Duota forma su penkiais įvesties laukais, į kuriuos įvedami skaičiai. Išsiųskite šią formą į serverį POST metodu. Tegul serveris suranda įvestų skaičių aritmetinį vidurkį ir atsiunčia rezultatą atgal į naršyklę.