Skicka GET-förfrågningar via AJAX i JavaScript

Låt oss nu lära oss att skicka data till servern i en AJAX-förfrågan. Servern kommer att göra något med dessa data och skicka tillbaka resultatet till oss.

Vår testserver kommer att bearbeta data som skickas till adressen /handler/:

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

Låt oss börja med att skicka en GET förfrågan:

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

Låt oss ta emot de skickade datan på serversidan:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // kommer att skriva ut 3
	}
}

Låt oss göra något med dessa data och skicka tillbaka dem:

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

På klientsidan tar vi emot resultatet och skriver ut det någonstans:

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

På klienten finns en div och en knapp. Vid klick på knappen, skicka två tal till servern. Låt servern hitta summan av de överförda talen. Skriv resultatet i div-en.

Låt det finnas en array på servern. Låt servern förvänta sig att ett tal skickas som parameter, och returnera arrayelementet som motsvarar detta tal. Vid klick på knappen, skicka ett tal till servern, och skriv ut serverns svar i ett stycke.