PHP ja AJAX MySQL tietokantaesimerkki

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 Kiina
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 Yhdysvallat
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 Kiina
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 Yhdysvallat

Esimerkin selitys

Yllä olevassa esimerkissä, kun käyttäjä valitsee asiakkaan yllä olevasta pudotusvalikosta, suoritetaan nimeltään 'showUser()' oleva funktio.

Tämä funktio käynnistetään onchange-tapahtuman avulla.

Tämä on HTML-koodi:

Esimerkki

<!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="">Valitse asiakas:</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>客户信息将在此处列出。</b></div>
</body>
</html>

运行实例

代码解释：

首先，检查是否选择了客户。如果未选择任何客户（str ==“”），则清除 txtHint 的内容并退出该函数。如果选择了某个客户，则执行以下操作：

  • 创建 XMLHttpRequest 对象
  • 创建服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的文件
  • 请注意，参数（q）被添加到 URL（带有下拉列表的内容）

PHP 文件

上面的 JavaScript 调用的服务器上的页面是一个名为“getuser.php”的 PHP 文件。

“getuser.php”中的源代码对 MySQL 数据库运行查询，并在 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>Yrityksen nimi</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>yhteyshenkilö</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Osoite</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>kaupunki</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Postinumero</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Maa</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Selitys: Kun kysely lähetetään JavaScriptistä PHP-tiedostoon, seuraavaa tapahtuu:

  • PHP avaa yhteyden MySQL-palvelimeen
  • Löysin oikean asiakkaan
  • Luo HTML-taulukko, täytä tiedot ja lähetä takaisin "txtHint"-korvikkeelle