使用AJAX+jQuery实现HTML端多表关联数据按项目分组展示求助

1. 修正SQL查询逻辑 #

原SQL的表关联条件完全错误，中间表proj_stu_junc是项目和学生的关联表，需要以项目为维度关联对应的学生数据，修正后的查询语句如下：

SELECT 
  p.Project_id, 
  p.Title, 
  p.Description, 
  s.Name AS StudentName 
FROM projects p 
LEFT JOIN proj_stu_junc psj ON p.Project_id = psj.Project_id 
LEFT JOIN students s ON psj.Student_id = s.Student_id 
ORDER BY p.Project_id

按项目ID排序可以保证同项目的所有关联数据连续返回，方便后续分组。

2. 调整main.php返回格式 #

原PHP仅输出项目标题纯文本，无法支撑分组渲染，需要将数据整理为结构化的JSON格式返回：

<?php
// 前面的数据库连接代码保持不变
header('Content-Type: application/json');
$result = $con->query("上述修正后的SQL语句");

$projectData = [];
while($row = mysqli_fetch_assoc($result)) {
    $projectId = $row['Project_id'];
    // 项目不存在则初始化项目信息
    if(!isset($projectData[$projectId])) {
        $projectData[$projectId] = [
            'title' => $row['Title'],
            'description' => $row['Description'],
            'students' => []
        ];
    }
    // 项目下有学生的话加入学生列表
    if($row['StudentName']) {
        $projectData[$projectId]['students'][] = $row['StudentName'];
    }
}
mysqli_free_result($result);
// 输出JSON格式数据
echo json_encode(array_values($projectData));
?>

3. 改写jQuery渲染逻辑 #

调整AJAX参数接收JSON数据，按项目维度生成独立的分组div：

$.ajax({
    type: "GET",
    url: 'main.php',
    dataType: 'json', // 指定接收JSON格式
    success: renderProjects
});

function renderProjects(projectList) {
    const $container = $('#getfive');
    // 清空原有内容
    $container.empty();
    // 遍历每个项目生成分组div
    projectList.forEach(project => {
        // 生成项目独立div
        const $projectDiv = $('<div class="project-item"></div>');
        // 拼接项目标题、描述
        $projectDiv.append(`<h3>${project.title}</h3>`);
        $projectDiv.append(`<p class="desc">${project.description}</p>`);
        // 拼接关联学生列表
        const $stuList = $('<ul class="student-list"></ul>');
        project.students.forEach(student => {
            $stuList.append(`<li>${student}</li>`);
        });
        $projectDiv.append($stuList);
        // 加入到容器中
        $container.append($projectDiv);
    });
}

4. HTML结构无需修改 #

原占位结构可直接使用，你也可以自行添加.project-item、.desc等类的样式调整展示效果。

内容的提问来源于stack exchange，提问作者Kenny.k