AJAX Database

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

例子解释

在上面的例子中，当用户在上面的下拉列表中选择客户时，会执行名为“showUser()”的函数。

该函数由 onchange 事件触发。

这是 HTML 代码：

PHP 实例

<!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(,NULL);
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP",NULL);
  }
  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,NULL);
  xmlhttp.send(,NULL);
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">请选择一个客户：</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'],NULL);

$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers',NULL);
if (!$con) {
    die('Could not connect: ' . mysqli_error($con),NULL);
}

$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql,NULL);

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,NULL);
?>

解释：当查询从 JavaScript 发送到 PHP 文件时，会发生以下情况：

PHP 打开与 MySQL 服务器的连接
找到了正确的客户
创建一个 HTML 表，填充数据，并发送回“txtHint”占位符

本教程仅供参考学习，如用于商业带来的问题，本站概不负责。

IT教程热度

1Python3 教程 2C++ 教程 3Python3 字符串 4MySQL 教程 5Linux MongoDB