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
文件,你将看到一个包含用户信息的表格,这些数据是从后端数据库中获取的。
本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/441102.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除