การส่งคำขอ GET ผ่าน AJAX ใน JavaScript

ตอนนี้มาเรียนรู้การส่ง ข้อมูลไปยังเซิร์ฟเวอร์ในคำขอ AJAX กัน เซิร์ฟเวอร์จะทำบางอย่างกับ ข้อมูลนี้และส่งผลลัพธ์กลับมาให้เรา

เซิร์ฟเวอร์ทดสอบของเราจะประมวลผล ข้อมูลที่ส่งไปยังที่อยู่ /handler/:

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

เริ่มต้นด้วยการส่งคำขอ GET กัน:

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

มาเรียกดูข้อมูลที่ส่งมา ฝั่งเซิร์ฟเวอร์กัน:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // จะแสดง 3
	}
}

มาทำบางอย่างกับข้อมูลนี้ และส่งกลับไปกัน:

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

ฝั่งไคลเอ็นต์รับผลลัพธ์ และแสดงผลที่ไหนสักแห่ง:

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

ฝั่งไคลเอ็นต์มี div และปุ่ม เมื่อคลิกที่ ปุ่มให้ส่งตัวเลขสองตัวไปยังเซิร์ฟเวอร์ ให้ เซิร์ฟเวอร์หาผลรวมของตัวเลขที่ส่งมา เขียนผลลัพธ์ ลงใน div

ให้เซิร์ฟเวอร์มีอาร์เรย์ ให้เซิร์ฟเวอร์ คาดหวังว่าจะส่งตัวเลขมาเป็นพารามิเตอร์ และคืนค่าองค์ประกอบของอาร์เรย์ที่ตรงกับ ตัวเลขนั้น เมื่อคลิกที่ปุ่มให้ส่ง ตัวเลขบางตัวไปยังเซิร์ฟเวอร์ และนำคำตอบจากเซิร์ฟเวอร์ มาแสดงในย่อหน้า