Mẫu cơ sở dữ liệu MySQL AJAX và PHP

AJAX có thể được sử dụng để giao tiếp tương tác với cơ sở dữ liệu.

Ví dụ cơ sở dữ liệu AJAX

Trong ví dụ AJAX dưới đây, chúng ta sẽ trình bày cách trang web sử dụng công nghệ AJAX để đọc thông tin từ cơ sở dữ liệu MySQL.

Chọn một khách hàng trong danh sách thả xuống.


Dưới đây sẽ liệt kê thông tin khách hàng.

Chương trình này được组成 từ bốn yếu tố:

  • Cơ sở dữ liệu MySQL
  • Một biểu mẫu HTML đơn giản
  • JavaScript
  • PHP trang

Cơ sở dữ liệu

Cơ sở dữ liệu mà chúng ta sẽ sử dụng trong ví dụ này trông giống như thế này:

id CustomerID CompanyName ContactName Address City PostalCode Country
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 Trung Quốc
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 Trung Quốc
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 USA

Giải thích ví dụ

Trong ví dụ trên, khi người dùng chọn khách hàng trong danh sách thả xuống trên, hàm tên là 'showUser()' sẽ được thực thi.

Hàm này được kích hoạt bởi sự kiện onchange.

Đây là mã HTML:

Mẫu

<!doctype html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // mã cho IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // mã cho IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Chọn một khách hàng:</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>Thông tin khách hàng sẽ được liệt kê ở đây.</b></div>
</body>
</html>

Chạy mẫu

Giải thích mã:

Trước tiên, kiểm tra xem bạn đã chọn khách hàng chưa. Nếu bạn chưa chọn bất kỳ khách hàng nào (str == ""), hãy xóa nội dung txtHint và thoát khỏi hàm. Nếu bạn đã chọn một khách hàng nào đó, hãy thực hiện các bước sau:

  • Tạo đối tượng XMLHttpRequest
  • Tạo hàm sẽ được thực hiện khi máy chủ sẵn sàng phản hồi
  • Gửi yêu cầu đến tệp trên máy chủ
  • Lưu ý rằng tham số (q) được thêm vào URL (bạn có thể chọn từ danh sách rơi)

Tệp PHP

Trang web được gọi từ JavaScript trên máy chủ là tệp PHP có tên là "getuser.php".

Mã nguồn trong tệp "getuser.php" thực hiện truy vấn cơ sở dữ liệu MySQL và hiển thị kết quả trong bảng HTML:

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th>Tên công ty</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>Tên liên hệ</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Địa chỉ</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>Thành phố</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Mã bưu điện</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Quốc gia</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Giải thích: Khi truy vấn được gửi từ JavaScript đến tệp PHP, sẽ xảy ra các tình huống sau:

  • PHP mở kết nối với máy chủ MySQL
  • Tìm thấy khách hàng đúng
  • Tạo một bảng HTML, điền dữ liệu và gửi lại dấu phím tạm "txtHint"