Sending GET Requests via AJAX in JavaScript

La oss nå lære å sende data til serveren i en AJAX-forespørsel. Serveren vil gjøre noe med disse dataene og sende tilbake resultatet til oss.

Vår testserver vil behandle dataene sendt til adressen /handler/:

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

La oss starte med å sende en GET forespørsel:

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

La oss motta de sendte dataene på serversiden:

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

La oss gjøre noe med disse dataene og sende dem tilbake:

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

På klientsiden mottar vi resultatet og skriver det ut et sted:

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

På klienten er det gitt en div og en knapp. Ved klikk på knappen send to tall til serveren. La serveren finne summen av de sendte tallene. Resultatet skrives inn i div-en.

La det på serveren være gitt en array. La serveren forvente at et tall sendes som parameter, og returnerer array-elementet som tilsvarer dette tallet. Ved klikk på en knapp send et tall til serveren, og serverens svar skrives ut i et avsnitt.