AJAX获取PHP JSON数据生成动态表格失败问题求助

我帮你排查了代码里的几个关键问题，这些错误导致JSON解析失败、表格无法正常生成，咱们一步步来修复：

核心问题分析 #

1. PHP接口输出无效JSON：你现在的PHP是循环输出单个JSON对象，前端拿到的是无结构的多个JSON拼接字符串（比如{"a":1}{"b":2}），这不符合JSON语法规范，根本无法被正确解析成数组。
2. JS端解析逻辑错误：手动拼接数组字符串、多余的JSON.parse(JSON.stringify(data))操作，导致你遍历的其实是字符串的每个字符，而非数据数组的元素。

第一步：修复PHP接口，输出标准JSON数组 #

把所有数据先存入数组，最后统一输出整个数组的JSON，同时设置正确的响应头让前端识别：

<?php
$filtr = []; // 初始化空数组
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        // 完善判断条件，避免空值混入
        if ($row["Author"] !== "" && $row["Name"] !== "") { 
            $table_data = [
                "Author" => $row["Author"],
                "Name" => $row["Name"],
                "Text" => $row["Text"]
            ];
            $filtr[] = $table_data; // 将数据对象加入数组
        }
    }
}
// 设置JSON响应头，确保前端正确解析
header('Content-Type: application/json');
echo json_encode($filtr);
?>

这样接口会输出格式规范的JSON数组，比如：

[{"Author":"张三","Name":"测试书名","Text":"测试内容"},{"Author":"李四","Name":"另一本书","Text":"更多内容"}]

第二步：修复JS代码，正确渲染表格 #

利用jQuery自动解析JSON的特性，直接遍历数组生成表格行：

$.post("../include/filtr_callback.php", { sel_id: knih_callback }, function(data) {
    console.log('接口返回数据：', data);

    // 创建表格元素并添加到容器
    const tbl = $("<table/>").attr("id", "table-data");
    $("#tabulka").append(tbl);

    // 遍历数据数组，生成每行内容
    data.forEach(item => {
        const tr = $("<tr>");
        // 注意：你原来的代码里重复了Name字段，确认是否是笔误
        tr.append(`<td>${item.Author}</td>`);
        tr.append(`<td>${item.Name}</td>`);
        tr.append(`<td>${item.Name}</td>`); 
        tr.append(`<td>${item.Text}</td>`);
        tbl.append(tr);
    });
}, 'json'); // 指定dataType为json，确保解析正确

额外优化提示 #

• 如果担心接口返回空数组，可以加个判断：if (data.length === 0) { tbl.append('<tr><td colspan="4">暂无数据</td></tr>'); }
• 可以给表格加一些基础样式，让它更美观

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