Gửi yêu cầu GET qua AJAX trong JavaScript

Bây giờ chúng ta hãy học cách gửi dữ liệu đến máy chủ trong một yêu cầu AJAX. Máy chủ sẽ làm gì đó với dữ liệu này và gửi lại cho chúng ta kết quả.

Máy chủ thử nghiệm của chúng ta sẽ xử lý dữ liệu được gửi đến địa chỉ /handler/:

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

Trước hết, hãy gửi một yêu cầu GET:

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

Hãy lấy dữ liệu đã gửi ở phía máy chủ:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // sẽ in ra 3
	}
}

Hãy làm gì đó với dữ liệu này và gửi lại:

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

Ở phía client, hãy nhận kết quả và in nó ra đâu đó:

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

Ở client có một thẻ div và một nút. Khi nhấp vào nút, hãy gửi đến máy chủ hai số. Hãy để máy chủ tìm tổng của các số đã truyền. Ghi kết quả vào thẻ div.

Giả sử trên máy chủ có một mảng. Hãy để máy chủ chờ một số được truyền dưới dạng tham số, và trả về phần tử mảng tương ứng với số đó. Khi nhấp vào nút, hãy truyền một số nào đó đến máy chủ, và câu trả lời từ máy chủ hãy xuất ra một đoạn văn.