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 đây sẽ minh họa cách một trang web có thể lấy thông tin từ cơ sở dữ liệu bằng AJAX:
Ví dụ
Giải thích ví dụ - Cơ sở dữ liệu MySQL
Bảng cơ sở dữ liệu chúng tôi sử dụng trong ví dụ trên trông như thế này:
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 |
Ví dụ giải thích
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 này được kích hoạt bởi sự kiện onchange
.
Đây là mã HTML:
Ví 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","family.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>
Chạy ví dụ »Giải thích mã:
Đầu tiên, 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 chức năng. 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 hàm để thực thi khi phản hồi của máy chủ sẵn sàng
- Gửi yêu cầu đến một tập tin trên máy chủ
- Lưu ý rằng 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 gọi bằng JavaScript ở trên là một tệp PHP có tên family.php
.
Mã nguồn trong family.php
chạy truy vấn đối với cơ sở dữ liệu MySQL và trả về kết quả trong bảng HTML:
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123');
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);
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 tới máy chủ MySQL
- Đã tìm thấy đúng người
- 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