我来说说html如何获取后端数据库。

HTML是一种用于创建网页的标记语言,它本身并不能直接获取后端数据库的数据,通过JavaScript和一些后端技术,我们可以实现HTML页面与后端数据库的交互,在本回答中,我们将详细介绍如何使用HTML、JavaScript和PHP来实现这一目标。

html如何获取后端数据库

(图片来源网络,侵删)

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联系删除

(0)
小甜小甜订阅用户
上一篇 2024年6月24日 10:06
下一篇 2024年6月24日 10:06

相关推荐

  • 我来说说html做的网页如何转asp。

    将HTML网页转换为ASP(Active Server Pages)涉及将静态页面转换为动态页面,以便可以使用服务器端脚本和数据库交互,下面是详细的步骤和教程,以帮助你完成这个过程。 (图片来源网络,侵删) 准备工作: 1、确保…

    2024年6月23日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息