PHP - AJAX và MySQL
AJAX có thể được sử dụng để giao tiếp tương tác với cơ sở dữ liệu.
Ví dụ về cơ sở dữ liệu AJAX
Ví dụ sau sẽ chứng minh cách một trang web có thể tìm nạp thông tin từ cơ sở dữ liệu với AJAX:
Thí dụ
Giải thích ví dụ - Cơ sở dữ liệu MySQL
Bảng cơ sở dữ liệu mà chúng tôi sử dụng trong ví dụ trên trông giống như sau:
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
Giải thích ví dụ
Trong ví dụ trên, khi người dùng chọn một người trong danh sách thả xuống ở trên, một hàm có tên "showUser ()" sẽ được thực thi.
Chức năng được kích hoạt bởi sự kiện onchange.
Đây là mã HTML:
Thí dụ
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Giải thích mã:
Đầu tiên, hãy kiểm tra xem người đó có được chọn hay không. Nếu không có người nào được chọn (str == ""), hãy xóa nội dung của txtHint và thoát khỏi hàm. Nếu một người được chọn, hãy làm như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo chức năng được thực thi khi phản hồi của máy chủ đã sẵn sàng
- Gửi yêu cầu tới một tệp trên máy chủ
- Lưu ý rằng một tham số (q) được thêm vào URL (với nội dung của danh sách thả xuống)
Tệp PHP
Trang trên máy chủ được JavaScript gọi ở trên là một tệp PHP có tên "getuser.php".
Mã nguồn trong "getuser.php" chạy một truy vấn dựa trên cơ sở dữ liệu MySQL và trả về kết quả trong một bảng HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>Giải thích: Khi truy vấn được gửi từ JavaScript đến tệp PHP, điều sau sẽ xảy ra:
- PHP mở kết nối đến máy chủ MySQL
- Đúng người được tìm thấy
- Một bảng HTML được tạo, chứa đầy dữ liệu và được gửi trở lại trình giữ chỗ "txtHint"