html接收js读取到的mysql数据

原创

mob64ca12db7156 2024-03-21 05:10:46 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12db7156的原创作品，请联系作者获取转载授权，否则将追究法律责任

从MySQL数据库读取数据并在HTML页面上展示

在网页开发中，常常需要从数据库中读取数据并展示在页面上，这就需要通过前端的JavaScript与后端的数据库进行交互。本文将介绍如何使用HTML页面接收JavaScript读取到的MySQL数据库数据，并将其展示在页面上。

1. 前端与后端的交互

在前端，我们可以通过JavaScript发起Ajax请求来获取后端返回的数据。后端则需要通过编程语言（如PHP、Python等）来连接数据库，并将查询结果返回给前端。在本文中，我们将使用JavaScript来作为前端语言，MySQL作为数据库，PHP作为后端语言。

2. 数据库准备

首先，需要准备一个MySQL数据库，并创建一个表travel，表结构如下：

CREATE TABLE travel (
    id INT AUTO_INCREMENT PRIMARY KEY,
    destination VARCHAR(100) NOT NULL,
    date DATE NOT NULL
);

然后插入一些数据：

INSERT INTO travel (destination, date) VALUES ('Paris', '2022-05-20');
INSERT INTO travel (destination, date) VALUES ('Tokyo', '2022-07-10');
INSERT INTO travel (destination, date) VALUES ('New York', '2022-08-15');

3. 后端代码

接下来，编写一个PHP接口来连接数据库并查询数据：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM travel";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

echo json_encode($data);

$conn->close();
?>

4. 前端代码

接下来，编写一个HTML页面来展示从数据库中查询到的数据：

<!DOCTYPE html>
<html>
<head>
    <title>Travel Destinations</title>
    <script src="
</head>
<body>
    My Travel Destinations
    <ul id="destinations"></ul>

    <script>
        $.ajax({
            url: 'backend.php',
            method: 'GET',
            success: function(data) {
                data.forEach(function(destination) {
                    $('#destinations').append('<li>' + destination.destination + ' - ' + destination.date + '</li>');
                });
            }
        });
    </script>
</body>
</html>

5. 完整的交互流程

使用Mermaid语法创建旅行图以展示完整的交互流程：

journey
    title 数据库读取流程

    section 前端
        HTML页面 -> JavaScript: 发起Ajax请求
    section 后端
        JavaScript -> PHP: 请求数据
    section 数据库
        PHP -> MySQL: 查询数据
        MySQL --> PHP: 返回数据
        PHP --> JavaScript: 返回数据
    section 前端
        JavaScript -> HTML页面: 展示数据

6. 时间轴

使用Mermaid语法创建甘特图以展示时间轴：

gantt
    title 数据库读取时间轴

    section 数据准备
        准备数据库表结构: done, 2022-04-01, 1d
        插入数据: done, 2022-04-02, 1d

    section 后端
        编写PHP接口: done, 2022-04-03, 2d

    section 前端
        编写HTML页面: done, 2022-04-04, 1d
        编写JavaScript代码: done, 2022-04-05, 1d