Dërgimi i Formës përmes AJAX duke përdorur FormData në JavaScript

Duke përdorur FormData mund të dërgoni automatikisht të gjitha fushat e formës në server. Le të shohim se si bëhet kjo.

Le të supozojmë se kemi formën e mëposhtme, ku inputeve u janë dhënë atributet name:

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

Le ta dërgojmë këtë formë përmes AJAX. Për fillim, le të marrim një referencë për formën në një variabël:

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

Tani në trupin e kërkesës si të dhëna le të përcaktojmë objektin FormData. Dhe vetë objektit si parametër ia kalojmë referencën për formën:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // kalojmë referencën për formën
	});
	
	event.preventDefault();
});

Si rezultat në server ne do të jemi në gjendje të marrim vlerat e inputeve sipas emrave të tyre nga atributet name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'të dhënat e formës u pranuan';
	}
}

Është dhënë një formë me pesë inpute, në të cilat futen numra. Dërgojeni këtë formë në server me metodën POST. Le të gjejë serveri mesataren aritmetike të numrave të futur dhe të dërgojë rezultatin prapa në shfletues.