PHP课程

浏览13598
更新时间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,我来也

34万次学习

收藏

免费

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

39.6万次学习

收藏

免费

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

31万次学习

收藏

精品课程

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

共29课时

64.9万人学习

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

共25课时

41.2万人学习

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

共43课时

76.6万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.1万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.3万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.2万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.1万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载