如何将数据库数据填充到DataTable？遇Invalid JSON响应错误

核心问题排查与修复 #

1. 匹配DataTables要求的JSON格式 #

DataTables默认期望返回的JSON是包含data键的对象结构，而非直接的数组。修改PHP代码：

// 先设置正确的响应头，避免编码或类型冲突
header('Content-Type: application/json; charset=utf-8');

$pdo = connect_to_database();
$stmt = $pdo->prepare('SELECT date_time, water_level FROM water_level_logs');
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 将查询到的数据包裹在data字段中，符合DataTables的解析规则
echo json_encode(['data' => $data]);

2. 清除PHP输出的多余内容 #

• 删除index.php中PHP标签以外的所有空格、换行或无关HTML代码
• 检查connect_to_database()函数是否存在意外的echo/print输出
• 确保PHP错误信息不会混入JSON输出（建议开启错误日志记录，而非直接在页面输出错误）

3. 验证JSON的合法性 #

直接在浏览器访问index.php，复制返回内容到JSON校验工具（如本地JSON解析器），检查：

• 是否存在未转义的特殊字符
• 是否有语法错误（如未闭合的引号、多余逗号）
• 确认输出编码为UTF-8，避免乱码导致解析失败

4. 可选：调整AJAX配置适配原始数组输出 #

如果必须直接输出数组而非对象，可在DataTables的AJAX配置中指定dataSrc为空字符串：

$(document).ready(function() {
  $('#dataTable').DataTable({
    'ajax': {
      url: 'index.php',
      dataSrc: ''
    },
    'columns': [
      { data: 'date_time' },
      { data: 'water_level' }
    ],
    lengthMenu: [5, 10, 15]
  });
});

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