Menghantar Permintaan GET melalui AJAX dalam JavaScript

Sekarang mari kita belajar menghantar data ke pelayan dalam permintaan AJAX. Pelayan akan melakukan sesuatu dengan data ini dan menghantar kembali hasilnya kepada kita.

Pelayan ujian kami akan memproses data yang dihantar ke alamat /handler/:

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

Sebagai permulaan, mari kita hantar permintaan GET:

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

Mari kita dapatkan data yang dihantar di sisi pelayan:

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

Mari kita lakukan sesuatu dengan data ini dan hantar kembali:

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

Di sisi klien, dapatkan hasilnya dan output ke suatu tempat:

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

Di klien, diberikan div dan butang. Apabila butang ditekan, hantar dua nombor ke pelayan. Biarkan pelayan mencari jumlah nombor yang dihantar. Hasil ditulis ke dalam div.

Biarkan di pelayan diberikan array. Biarkan pelayan mengharapkan nombor akan dihantar sebagai parameter, dan mengembalikan elemen array yang sepadan dengan nombor tersebut. Apabila butang ditekan, hantar beberapa nombor ke pelayan, dan jawapan pelayan dioutput ke dalam perenggan.