Envoi de requêtes GET via AJAX en JavaScript

Apprenons maintenant à transmettre des données au serveur dans une requête AJAX. Le serveur fera quelque chose avec ces données et nous renverra le résultat.

Notre serveur de test traitera les données envoyées à l'adresse /handler/ :

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

Pour commencer, envoyons une requête GET :

button.addEventListener('click', function() {
	let promise = fetch('/handler/?num=3');
});

Récupérons les données envoyées côté serveur :

export default {
	'/handler/': function({get}) {
		console.log(get.num); // affichera 3
	}
}

Faisons quelque chose avec ces données et renvoyons-les :

export default {
	'/handler/': function({get}) {
		return get.num ** 2;
	}
}

Côté client, récupérons le résultat et affichons-le quelque part :

button.addEventListener('click', function() {
	fetch('/handler/?num=3').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text);
		}
	);
});

Sur le client, un div et un bouton sont donnés. En cliquant sur le bouton, envoyez deux nombres au serveur. Que le serveur trouve la somme des nombres transmis. Écrivez le résultat dans le div.

Supposons qu'un tableau soit donné sur le serveur. Que le serveur s'attende à ce qu'un nombre soit transmis en paramètre, et renvoie l'élément du tableau correspondant à ce nombre. En cliquant sur un bouton, transmettez un nombre au serveur, et affichez la réponse du serveur dans un paragraphe.