Cách AJAX làm việc với cơ sở dữ liệu trong PHP

Posted on by mtoplistChuyên mục:Top List

Một ví dụ về cách AJAX làm việc giao tiếp với cơ sở dữ liệu

– AJAX thường được sử dụng để tương tác với cơ sở dữ liệu

– Ví dụ bên dưới sẽ cho các bạn thấy cách một trang web lấy dữ liệu từ cơ sở dữ liệu bằng AJAX.

Thông tin sinh viên

https://webcoban.vn/demo/file?id=3708

– Bảng cơ sở dữ liệu mà tôi sử dụng trong bài hướng dẫn này nó có tên là student, nó giống như bên dưới:

ID
Name
Gender
Year
City

1
Lý Thanh Phong
Nam
1994
Cần Thơ

2
Đinh Linh San
Nữ
1998
Vĩnh Long

3
Vương Khải Minh
Nam
2002
Cần Thơ

4
Trần Phong
Nam
1997
Vĩnh Long

5
Lê Tử Huân
Nữ
2000
Sóc Trăng

6
Tần Bá Thiên
Nam
1995
Vĩnh Long

– Ở ví dụ trên, khi người dùng chọn một sinh viên khác thì sự kiện onchange được kích hoạt, nó sẽ gọi đến hàm showStudent() để thực thi.

– Dưới đây là đoạn mã HTML của trang web ở ví dụ phía trên.

<!DOCTYPE html>
<html>
<head>
	<title>Thông tin sinh viên</title>
	<script>
		function showStudent(id_sinhvien){
			if(id_sinhvien==""){
				document.getElementById("table").innerHTML = "";
			}else{
				var myRequest = new XMLHttpRequest();
				myRequest.onreadystatechange = function() {
					if (this.readyState == 4 && this.status == 200) {
						document.getElementById("table").innerHTML = this.responseText;
					}
				};
				myRequest.open("GET","student.php?id="+id_sinhvien,true);
				myRequest.send();
			}
		}
	</script>
</head>
<body>
	<select onchange="showStudent(this.value)">
		<option value="">Chọn sinh viên:</option>
		<option value="1">Lý Thanh Phong</option>
		<option value="2">Đinh Linh San</option>
		<option value="3">Vương Khải Minh</option>
		<option value="4">Trần Phong</option>
		<option value="5">Lê Tử Huân</option>
		<option value="6">Tần Bá Thiên</option>
	</select>
	<div id="table" style="margin:20px 0px">THÔNG TIN SINH VIÊN SẼ HIỂN THỊ Ở ĐÂY</div>
</body>
</html>

Giải thích ý nghĩa của hàm showStudent()

– Trước tiên kiểm tra trường select có bị bỏ trống hay không (tức là chưa chọn sinh viên), nếu bị bỏ trống thì xóa hết nội dung bên trong phần tử #table, còn không thì tiếp tục thực thi các công việc bên dưới.

  1. Tạo một đối tượng XMLHttpRequest có tên là myRequest.
  2. Tạo một chức năng sẽ được thực thi khi phản hồi của máy chủ sẵn sàng.
  3. Gửi yêu cầu đến tập tin student.php trên máy chủ, lưu ý rằng khi gửi yêu cầu thì chúng ta cần phải truyền thêm một tham số có tên là

    id

    dùng để chứa id của sinh viên.

– Dưới đây là nội dung của tập tin student.php (chức năng của nó là tìm kiếm sinh viên trong bảng student dựa theo id của sinh viên, sau đó trả về bảng thông tin sinh viên trùng khớp)

<?php
	$id = intval($_GET['id']);
	$connect = mysqli_connect("localhost", "root", "", "my_db");
	if(!$connect){
		die("Không thể kết nối đến cơ sở dữ liệu: " . mysqli_error($connect));
	}
	mysqli_select_db($connect,"thamkhao");
	$sql = "SELECT * FROM student WHERE id = '".$id."'";
	$result = mysqli_query($connect,$sql);
	echo "<table border='1' cellpadding='10'>
	<tr>
	<th>ID</th>
	<th>Họ tên</th>
	<th>Giới tính</th>
	<th>Năm sinh</th>
	<th>Thành phố</th>
	</tr>";
	while($row = mysqli_fetch_array($result)){
		echo "<tr>";
		echo "<td>" . $row['ID'] . "</td>";
		echo "<td>" . $row['Name'] . "</td>";
		echo "<td>" . $row['Gender'] . "</td>";
		echo "<td>" . $row['Year'] . "</td>";
		echo "<td>" . $row['City'] . "</td>";
		echo "</tr>";
	}
	echo "</table>";
	mysqli_close($connect);
?>

mtoplist