GET-verzoeken verzenden via AJAX in JavaScript

Laten we nu leren hoe we gegevens naar de server kunnen verzenden in een AJAX-verzoek. De server zal iets doen met deze gegevens en het resultaat naar ons terugsturen.

Onze testserver zal de gegevens verwerken die naar het adres /handler/ zijn verzonden:

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

Laten we om te beginnen een GET -verzoek verzenden:

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

Laten we de verzonden gegevens aan de serverkant ophalen:

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

Laten we iets met deze gegevens doen en ze terugsturen:

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

Aan de clientkant halen we het resultaat op en geven het ergens weer:

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

Aan de clientkant zijn een div en een knop gegeven. Druk op de knop om twee getallen naar de server te sturen. Laat de server de som van de doorgegeven getallen vinden. Schrijf het resultaat in de div.

Stel dat aan de serverkant een array gegeven is. Laat de server verwachten dat een getal als parameter wordt doorgegeven, en retourneer het array-element dat overeenkomt met dit getal. Druk op een knop om een getal naar de server te sturen, en geef het antwoord van de server weer in een alinea.