PHP and AJAX MySQL Database Example

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

Paliwanag ng Halimbawa

Sa itaas na halimbawa, kapag pinili ng user ang mamimili mula sa itaas na dropdown list, magsasagawa ang function na may pangalang "showUser()".

Ang function na ito ay inilulunsad ng onchange event.

Ito ang HTML Code:

Mga Halimbawa

<!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="">Piliin ang isang mamimili:</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>Ang impormasyon ng customer ay ilalagay dito.</b></div>
</body>
</html>

Tumakbo ang isang instance

Paliwanag ng kodigo:

Unang-una, suriin kung napili ang customer. Kung wala ang napili ang anumang customer (str == ""), burahin ang nilalaman ng txtHint at lumisan sa function. Kung napili ang anumang customer, gawin ang sumusunod:

  • Lumikha ng XMLHttpRequest object
  • Lumikha ng function na dapat isasagawa kapag handa ang server response
  • Magpadala ng request sa file sa server
  • Pansin na ang parameter (q) ay idinagdag sa URL (may dropdown content)

PHP file

Ang pahina na tinatawag na 'getuser.php' ay isang PHP file na nasa server.

Ang pinagmulang kodigo ng 'getuser.php' ay gumagawa ng pagtatanong sa MySQL database at ibibabalik ang mga resulta sa table 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>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);
?>

Explanation: When a query is sent from JavaScript to a PHP file, the following occurs:

  • PHP opens a connection to the MySQL server
  • Found the correct customer
  • Create an HTML table, fill in the data, and send back the 'txtHint' placeholder