点击带data-value的HTML链接，传参获取PHP数据无刷新更新图表

1. 修正HTML语法错误 #

原HTML中后两个<a>标签的class属性引号未闭合，先修复：

<a class="nav-link active" style="margin-top: 150px;" id="colesterol" data-value="0">Colesterol</a>
<a class="nav-link" style="margin-top: 150px;" id="azucar" data-value="2">Azucar</a>
<a class="nav-link" style="margin-top: 150px;" id="grasa" data-value="3">Grasa</a>

2. 创建PHP接口文件 #

新建get-graph-data.php文件，作为前端获取数据的接口：

<?php
// 确保$list_requerimientos变量已定义或通过引入文件获取
$index = $_GET['index'] ?? 0;
// 调用API函数获取对应数据
$datosGraficas = recogerDatosGraficasAPI($list_requerimientos[$index]);
// 设置响应头为JSON格式
header('Content-Type: application/json');
// 返回JSON数据
echo json_encode($datosGraficas);
?>

3. 修改JavaScript代码 #

使用异步请求获取新数据，实现无刷新更新图表：

document.querySelectorAll('.nav-link').forEach(function(link) {
    link.addEventListener('click', async function(event) {
        // 切换导航激活状态
        document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
        event.target.classList.add('active');

        // 获取当前点击链接的data-value值
        const index = event.target.getAttribute('data-value');

        try {
            // 异步请求PHP接口获取新数据
            const response = await fetch(`get-graph-data.php?index=${index}`);
            const datosGraficas = await response.json();

            // 提取数据并调用更新图表的函数
            const datosDietas = datosGraficas['dietas'];
            const datosCocinas = datosGraficas['cocinas'];
            const datosMinutos = datosGraficas['minutos'];
            actualizarGrafico(datosDietas, datosCocinas, datosMinutos);
        } catch (error) {
            console.error('数据获取失败:', error);
        }
    });
});

核心说明 #

• PHP是服务器端代码，无法在客户端点击事件中动态执行，必须通过**异步HTTP请求（AJAX）**实现数据的动态拉取。
• 若项目环境不支持async/await，可替换为传统的XMLHttpRequest写法。
• 需确保recogerDatosGraficasAPI函数和$list_requerimientos变量在PHP接口文件中可正常访问，必要时通过include/require引入相关文件。

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