Envoi de requêtes POST via AJAX en JavaScript

Envoyons maintenant une requête POST au serveur. Pour cela, la fonction fetch a un second paramètre avec des configurations. Dans le paramètre method est spécifiée la méthode de requête HTTP. Spécifions la méthode POST :

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

Définissons également les données que nous souhaitons envoyer au serveur. Dans les requêtes POST, les données sont transmises dans le corps de la requête HTTP. Pour cela, les données doivent être spécifiées dans le paramètre body. Spécifions-les sous forme de Query String, en définissant leur type avec le MIME correspondant :

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

Récupérons ces données sur le serveur, faisons quelque chose avec elles et renvoyons le résultat :

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

Sur le client, un div et un bouton sont donnés. En cliquant sur le bouton, envoyez trois nombres au serveur par la méthode POST. Que le serveur trouve la somme des nombres transmis. Enregistrez le résultat dans le div.