Ví dụ về cơ sở dữ liệu AJAX
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ụ
Customer info will be listed here...
Giải thích ví dụ - Hàm showCustomer ()
Khi người dùng chọn một khách hàng trong danh sách thả xuống ở trên, một hàm được gọi showCustomer()
sẽ được thực thi. Chức năng được kích hoạt bởi onchange
sự kiện:
showCustomer
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
Hàm showCustomer()
thực hiện những việc sau:
- Kiểm tra xem khách hàng có được chọn không
- 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)
Trang máy chủ AJAX
Trang trên máy chủ được JavaScript gọi ở trên là một tệp PHP có tên "getcustomer.php".
Mã nguồn trong "getcustomer.php" chạy một truy vấn dựa trên cơ sở dữ liệu và trả về kết quả trong một bảng HTML:
<?php
$mysqli = new mysqli("servername", "username",
"password", "dbname");
if($mysqli->connect_error) {
exit('Could not connect');
}
$sql = "SELECT customerid, companyname,
contactname, address, city, postalcode, country
FROM customers WHERE
customerid = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid,
$cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo
"<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname
. "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" .
$adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" .
$pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country .
"</td>";
echo "</tr>";
echo "</table>";
?>