Afsendelse af GET-forespørgsler via AJAX i JavaScript

Lad os nu lære at sende data til serveren i en AJAX-forespørgsel. Serveren vil gøre noget med disse data og sende os tilbage et resultat.

Vores testserver vil behandle data sendt til adressen /handler/:

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

Lad os starte med at sende en GET forespørgsel:

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

Lad os modtage de sendte data på serversiden:

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

Lad os gøre noget med disse data og sende dem tilbage:

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

På klientsiden modtager vi resultatet og udskriver det et sted:

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

På klienten er der givet en div og en knap. Ved klik på knappen, send to tal til serveren. Lad serveren finde summen af de sendte tal. Resultatet skrives i div'en.

Lad der på serveren være givet et array. Lad serveren forvente, at der sendes et tal som parameter, og returner array-elementet, der svarer til det pågældende tal. Ved klik på en knap, send et tal til serveren, og skriv serverens svar i et afsnit.