GET-päringute saatmine läbi AJAXi JavaScriptis

Õpime nüüd andmeid saatma serverile AJAX-päringus. Server teeb midagi nende andmetega ja saadab meile tagasi tulemuse.

Meie testserver töötleb andmeid, mis saadetakse aadressile /handler/:

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

Alustuseks saadame GET päringu:

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

Saame serveri poolel saadetud andmed kätte:

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

Teeme nende andmetega midagi ja saadame need tagasi:

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

Kliendi poolel saame tulemuse kätte ja väljastame selle kuhugi:

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

Kliendil on antud div ja nupp. Vajutades nuppu, saatke serverile kaks numbrit. Olgu server leiab saadetud numbrite summa. Tulemuse kirjutage div-i.

Olgu serveril antud massiiv. Olgu server ootab, et parameetrina saadetakse number, ja tagastab massiivi elemendi, mis vastab sellele numbrile. Vajutades nuppu, saatke serverile mingi number, ja serveri vastuse väljastage lõiguks.