手册目录

PHP课程

浏览10496
更新时间2025-08-06

AJAX 数据库实例

下例将演示网页如何使用 AJAX 从数据库中获取信息:

实例

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

实例解释 - MySQL 数据库

将在本例中使用的数据库看起来类似这样:

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 代码:

实例

<html>
<head>
<script>
function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
  }
}
</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 对象
  • 创建服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的文件
  • 请注意,URL 中添加了一个参数 q(带有下拉列表的内容)

PHP 文件

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

getuser.php 中的源代码针对 MySQL 数据库运行查询,并将结果以 HTML 表格的形式返回:

getuser.php

$q = intval($_GET['q']);

$con = mysqli_connect('MyServer','MyUser','MyPassword');
if (!$con) {
  die('无法连接:' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user 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);

例子解释:

当从 JavaScript 向 PHP 文件发送查询时,会发生以下情况:

  1. PHP 打开与 MySQL 服务器的连接
  2. 找到正确的人员
  3. 创建一个 HTML 表格,填充数据,并将其发送回 txtHint 占位符

相关视频

更多

免费

php8,我来也
初级php8,我来也

321771次学习

收藏

免费

Thinkphp6.0正式版视频教程
中级Thinkphp6.0正式版视频教程

382427次学习

收藏

免费

细说PHP第一季
中级细说PHP第一季

282761次学习

收藏

免费

简单聊聊PHP创业那点事
初级简单聊聊PHP创业那点事

13415次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时 | 62.5万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时 | 39.7万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时 | 73.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号