Slanje forme preko AJAX-a koristeći FormData JavaScript

Pomoću FormData moguće je automatski poslati sva polja forme na server. Hajde da pogledamo kako se to radi.

Neka imamo sledeću formu, u kojoj su inputima dati atributi name:

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

Hajde da pošaljemo ovu formu preko AJAX-a. Za početak ćemo dobiti referencu na formu u promenljivu:

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

Sada u telu zahteva kao podatke navedimo objekat FormData. A samom objektu prosledimo parametrom referencu na formu:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // prosleđujemo referencu na formu
	});
	
	event.preventDefault();
});

Kao rezultat, na serveru ćemo moći dobiti vrednosti input-a po njihovim imenima iz atributa name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'podaci forme primljeni';
	}
}

Data je forma sa pet input-a, u koje se unose brojevi. Pošaljite ovu formu na server POST metodom. Neka server pronade aritmetičku sredinu unetih brojeva i pošalje rezultat nazad u brauzer.