HTML是一种用于创建网页的标记语言，它本身并不能直接获取后端数据库的数据，通过JavaScript和一些后端技术，我们可以实现HTML页面与后端数据库的交互，在本回答中，我们将详细介绍如何使用HTML、JavaScript和PHP来实现这一目标。
（图片来源网络，侵删）
1、准备工作
我们需要一个运行PHP的服务器环境，这里我们以XAMPP为例，它是一个包含Apache服务器、MySQL数据库和PHP解释器的集成环境，你可以从官方网站下载并安装：https://www.apachefriends.org/index.html
2、创建数据库和表
在安装好XAMPP后，我们需要创建一个数据库来存储数据，这里我们创建一个名为testdb的数据库，并在其中创建一个名为users的表，用于存储用户信息。
CREATE DATABASE testdb; USE testdb; CREATE TABLE users ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, age INT(3), PRIMARY KEY (id) );3、插入数据
接下来，我们向users表中插入一些数据：
INSERT INTO users (name, age) VALUES (张三, 25); INSERT INTO users (name, age) VALUES (李四, 30); INSERT INTO users (name, age) VALUES (王五, 35);4、创建HTML页面
现在我们创建一个HTML页面，用于显示用户信息，在这个页面中，我们将使用JavaScript来发送AJAX请求，从后端获取数据，并将其显示在页面上。
创建一个名为index.html的文件，内容如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF8"> <title>获取后端数据库数据</title> <script src="https://code.jquery.com/jquery3.6.0.min.js"></script> </head> <body> <h1>用户信息</h1> <table id="userTable" border="1"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </table> <script> function loadData() { $.ajax({ url: get_data.php, // 请求后端数据的URL type: GET, // 请求类型为GET dataType: json, // 预期服务器返回JSON格式的数据 success: function(data) { // 请求成功后的回调函数 var table = $(#userTable); // 获取表格元素 for (var i = 0; i < data.length; i++) { // 遍历返回的数据 var row = $(<tr></tr>); // 创建表格行元素 row.append(<td> + data[i].id + </td>); // 添加ID列 row.append(<td> + data[i].name + </td>); // 添加姓名列 row.append(<td> + data[i].age + </td>); // 添加年龄列 table.append(row); // 将行元素添加到表格中 } } }); } loadData(); // 页面加载时调用loadData函数，获取数据并显示在表格中 </script> </body> </html>5、创建PHP处理文件
接下来，我们创建一个名为get_data.php的文件，用于处理前端发起的请求，从数据库中获取数据，并将其以JSON格式返回给前端。
<?php header(ContentType: application/json); // 设置响应头，告诉浏览器返回的是JSON格式的数据 $servername = "localhost"; // 数据库服务器地址 $username = "root"; // 数据库用户名（请根据实际情况修改） $password = ""; // 数据库密码（请根据实际情况修改） $dbname = "testdb"; // 数据库名称（请根据实际情况修改） $conn = new mysqli($servername, $username, $password, $dbname); // 建立与数据库的连接 if ($conn>connect_error) { // 如果连接失败，输出错误信息并结束脚本执行 die("连接失败： " . $conn>connect_error); } else { // 如果连接成功，执行查询操作，并将结果以JSON格式返回给前端 $sql = "SELECT * FROM users"; // SQL查询语句，从users表中获取所有数据 $result = $conn>query($sql); // 执行查询操作，并将结果保存在$result变量中 $data = array(); // 用于存储查询结果的数组 if ($result>num_rows > 0) { // 如果查询结果中有数据，将其逐行读取并添加到$data数组中 while($row = $result>fetch_assoc()) { // fetch_assoc()方法用于获取查询结果中的每一行数据，并将其作为关联数组返回（键名是字段名） $data[] = $row; // 将每一行数据添加到$data数组中 } } else { // 如果查询结果中没有数据，输出提示信息并结束脚本执行 echo "没有找到数据"; exit; } echo json_encode($data); // 将$data数组转换为JSON格式的字符串，并输出给前端（通过HTTP响应） $conn>close(); // 关闭与数据库的连接（不再需要时一定要关闭连接） } ?>至此，我们已经完成了整个流程，现在，你可以运行XAMPP服务器，然后在浏览器中访问index.html文件，你将看到一个包含用户信息的表格，这些数据是从后端数据库中获取的。
