Trimiterea formularului prin AJAX folosind FormData JavaScript

Cu ajutorul FormData puteți trimite automat toate câmpurile formularului către server. Să vedem cum se face acest lucru.

Să presupunem că avem următorul formular, în care input-urile au atributul name:

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

Să trimitem acest formular prin AJAX. Pentru început, să obținem o referință la formular într-o variabilă:

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

Acum, în corpul cererii, ca date specificăm obiectul FormData. Și obiectului îi transmitem ca parametru referința la formular:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // transmitem referința la formular
	});
	
	event.preventDefault();
});

Ca rezultat, pe server vom putea obține valorile input-urilor după numele lor din atributele name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'datele formularului au fost primite';
	}
}

Este dat un formular cu cinci input-uri, în care sunt introduse numere. Trimiteți acest formular către server folosind metoda POST. Lăsați serverul să găsească media aritmetică a numerelor introduse și să trimită rezultatul înapoi în browser.