Contoh Database MySQL dan AJAX PHP

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。

在下拉列表中选择一个客户


此处将列出客户信息。

这个应用程序由四个元素组成：

  • MySQL 数据库
  • 一张简单的 HTML 表单
  • JavaScript
  • PHP 页面

数据库

数据库在本例中看起来类似这样：

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

Pengertian Contoh

Dalam contoh di atas, apabila pengguna memilih pelanggan di senarai turun di atas, fungsi yang dipanggil adalah "showUser()".

Fungsi ini diaktifkan oleh peristiwa onchange.

Ini adalah kod HTML:

Contoh

<!doctype html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for 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="">Sila pilih pelanggan seorang:</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>Informasi pelanggan akan disini di daftar.</b></div>
</body>
</html>

Jalankan contoh

Pengertian kod:

Dahulu, periksa apakah pelanggan telah dipilih. Jika tidak ada pelanggan yang dipilih (str == ""), kosongkan konten txtHint dan keluar dari fungsi. Jika ada pelanggan yang dipilih, lakukan hal berikut:

  • Buat objek XMLHttpRequest
  • Buat fungsi yang akan dijalankan ketika respons pelayan siap
  • Kirim permintaan ke berkas di pelayan
  • Perhatikan bahawa parameter (q) ditambahkan ke URL (dengan konten pilihan turun)

Berkas PHP

Halaman pelayan yang dipanggil oleh JavaScript adalah berupa berkas PHP bernama "getuser.php".

Sumber kod "getuser.php" menjalankan query ke pangkalan data MySQL dan mengembalikan hasil ke dalam table 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>CompanyName</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>ContactName</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Address</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>City</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>PostalCode</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Country</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Pengertian: Apabila kerja panggilan daripada JavaScript ke fail PHP, berikut adalah kejadian:

  • PHP buka sambungan dengan pelayan MySQL
  • Mencari pelanggan yang betul
  • Cipta satu jadual HTML, isikan data, dan kirim kembali "txtHint" placeholder