Αποστολή φόρμας μέσω AJAX χρησιμοποιώντας FormData JavaScript

Με το FormData μπορούμε να στείλουμε αυτόματα όλα τα πεδία της φόρμας στον διακομιστή. Ας δούμε πώς γίνεται αυτό.

Ας υποθέσουμε ότι έχουμε την ακόλουθη φόρμα, στην οποία τα inputs έχουν τα χαρακτηριστικά name:

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

Ας στείλουμε αυτή τη φόρμα μέσω AJAX. Για αρχή, ας πάρουμε έναν σύνδεσμο προς τη φόρμα σε μια μεταβλητή:

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

Τώρα στο σώμα του αιτήματος ως δεδομένα θα ορίσουμε το αντικείμενο FormData. Και στον ίδιο το αντικείμενο ως παράμετρο θα περάσουμε τον σύνδεσμο προς τη φόρμα:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // περνάμε τον σύνδεσμο προς τη φόρμα
	});
	
	event.preventDefault();
});

Ως αποτέλεσμα, στο διακομιστή θα μπορούμε να λάβουμε τις τιμές των inputs από τα ονόματά τους από τα χαρακτηριστικά name:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form data received';
	}
}

Δίνεται μια φόρμα με πέντε inputs, στα οποία εισάγονται αριθμοί. Στείλτε αυτή τη φόρμα στον διακομιστή με μέθοδο POST. Αφήστε τον διακομιστή να βρει τον αριθμητικό μέσο όρο των εισαχθέντων αριθμών και να στείλει το αποτέλεσμα πίσω στο πρόγραμμα περιήγησης.