如何用Ajax/JQuery加载MySQL数据到HTML，点击按钮显对应行且免重复查询

我来给你梳理一个完美的解决方案，刚好符合你「只查一次数据库，点击按钮本地展示」的需求：

页面加载时通过PHP一次性从MySQL取出所有4条数据，用Ajax把数据拿到前端缓存起来，之后点击按钮直接从本地缓存里取对应数据展示，完全不用再发请求查数据库。

第一步：写后端PHP脚本（取名fetch_data.php） #

这个脚本负责连接数据库、查询所有数据，然后以JSON格式返回给前端，方便前端处理：

<?php
// 替换成你的数据库配置
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询表中所有4条数据（替换成你的表名）
$sql = "SELECT * FROM 你的表名 LIMIT 4";
$result = $conn->query($sql);

$data = [];
if ($result->num_rows > 0) {
    // 把每一行数据存入数组
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 返回JSON格式的数据
header('Content-Type: application/json');
echo json_encode($data);

// 关闭连接
$conn->close();
?>

第二步：修改你的test.html页面 #

在页面里加入Ajax请求逻辑，缓存数据，再给按钮绑定点击事件：

<!DOCTYPE html>
<html>
<head>
    <title>数据展示页面</title>
    <!-- 用jQuery简化Ajax操作，也可以用原生JS -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <!-- 用来展示数据的div，对应4条数据 -->
    <div id="q1"></div>
    <div id="q2"></div>
    <div id="q3"></div>
    <div id="q4"></div>

    <!-- 你的四个按钮，用data-val标记对应的数据行 -->
    <button type="button" data-val="1">按钮1</button>
    <button type="button" data-val="2">按钮2</button>
    <button type="button" data-val="3">按钮3</button>
    <button type="button" data-val="4">按钮4</button>

    <script>
        // 全局变量，用来缓存从数据库拿到的所有数据
        let allData = [];

        $(document).ready(function() {
            // 页面加载完成后，一次性请求所有数据
            $.ajax({
                url: 'fetch_data.php',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    allData = response; // 把数据存到本地缓存
                    console.log("数据加载完成啦！", allData);
                },
                error: function(xhr, status, error) {
                    console.error("加载数据失败:", error);
                }
            });

            // 给所有按钮绑定点击事件
            $('button').click(function() {
                // 获取按钮对应的序号（1-4）
                const btnNum = $(this).data('val');
                // 数组索引从0开始，所以减1对应到数据行
                const dataIndex = btnNum - 1;

                // 检查缓存里有没有对应的数据
                if (allData[dataIndex]) {
                    // 这里替换成你数据库表的实际字段，比如id、content等
                    const displayContent = `
                        <p>ID: ${allData[dataIndex].id}</p>
                        <p>内容: ${allData[dataIndex].content}</p>
                    `;
                    // 把数据渲染到对应的div里
                    $(`#q${btnNum}`).html(displayContent);
                } else {
                    $(`#q${btnNum}`).html("<p>暂无数据</p>");
                }
            });
        });
    </script>
</body>
</html>

几个关键细节要注意 #

• 字段替换：一定要把代码里的「你的表名」「数据库配置」「字段名（比如id、content）」换成你实际的内容，不然会报错。
• 不用jQuery？没问题：如果不想依赖jQuery，也可以用原生JS的fetch来替换Ajax部分：

// 原生fetch写法，替换掉jQuery的Ajax代码
fetch('fetch_data.php')
    .then(response => response.json())
    .then(data => {
        allData = data;
        console.log("数据加载完成啦！", allData);
    })
    .catch(error => console.error("加载数据失败:", error));

• 缓存逻辑：数据存在allData这个全局变量里，后续点击按钮直接从这里取，完全不会再请求数据库，完美满足你的需求。

内容的提问来源于stack exchange，提问作者pranav nerurkar