Αποστολή POST αιτημάτων μέσω AJAX σε JavaScript

Ας στείλουμε τώρα ένα POST αίτημα στον διακομιστή. Για αυτό, η συνάρτηση fetch έχει μια δεύτερη παράμετρο με ρυθμίσεις. Στη ρύθμιση method ορίζεται η μέθοδος HTTP του αιτήματος. Ας ορίσουμε τη μέθοδο POST:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

Ας ορίσουμε επίσης τα δεδομένα που θέλουμε να στείλουμε στον διακομιστή. Στα POST αιτήματα, τα δεδομένα μεταδίδονται στο σώμα του HTTP αιτήματος. Για αυτό τα δεδομένα πρέπει να οριστούν στη ρύθμιση body. Ας τα ορίσουμε σε μορφή Query String, ορίζοντας τον αντίστοιχο τύπο MIME:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

Ας λάβουμε αυτά τα δεδομένα στον διακομιστή, ας κάνουμε κάτι με αυτά και ας τα στείλουμε πίσω:

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

Στον client υπάρχει ένα div και ένα κουμπί. Με πάτημα στο κουμπί, στείλτε τρεις αριθμούς στον διακομιστή με μέθοδο POST. Αφήστε τον διακομιστή να βρει το άθροισμα των αριθμών που μεταδόθηκαν. Γράψτε το αποτέλεσμα στο div.