PHP+AJAX数据交互报错：JSON解析遇无效HTML字符求助

数据老陈

2026-6-14

问题根源与解决建议

错误提示Uncaught SyntaxError: Unexpected token '<'说明前端收到的不是纯JSON数据，而是混入了HTML格式的错误提示（比如 、标签）——这是PHP后端输出了非JSON内容导致的，哪怕你觉得后端正常，也大概率是爬取/数据库环节有隐藏的警告或错误，只是这些错误以HTML形式输出，和JSON混在了一起。

排查与解决步骤

1. 先确认后端输出是否为纯JSON

直接在浏览器地址栏访问DataProcessor2.php，查看返回内容：

如果看到 、Warning这类内容，说明后端有错误输出；
如果是纯JSON字符串，再检查是否有多余的空格/换行在JSON前后。

2. 修复PHP后端的输出问题

（1）关闭错误的HTML输出，改用JSON返回错误

在PHP脚本最开头添加以下代码，避免错误信息以HTML形式混入JSON：

<?php
// 关闭浏览器端的错误显示，避免HTML错误输出
error_reporting(0);
ini_set('display_errors', 0);

// 可选：开启错误日志，方便后续排查问题
// error_reporting(E_ALL);
// ini_set('log_errors', 1);
// ini_set('error_log', 'php_error.log');

（2）检查数据库操作的错误

在数据库连接、查询环节添加错误判断，确保出错时返回JSON格式的错误信息，而不是HTML：

$link = mysqli_connect("localhost","root","A12345678","bulletins translator");
// 检查数据库连接是否成功
if (!$link) {
    echo json_encode(['error' => '数据库连接失败: ' . mysqli_connect_error()]);
    exit; // 终止脚本，避免后续输出
}

$sql = "SELECT * FROM `daily bulletins`";
$result = mysqli_query($link, $sql);
// 检查查询是否成功
if (!$result) {
    echo json_encode(['error' => '查询失败: ' . mysqli_error($link)]);
    $link->close();
    exit;
}

（3）设置正确的响应头，确保输出纯JSON

在echo json_encode之前添加响应头，明确告诉浏览器返回的是JSON：

header('Content-Type: application/json; charset=utf-8');
echo json_encode($arr, JSON_UNESCAPED_UNICODE);
$link->close();
exit; // 确保脚本结束后没有多余输出

（4）清理PHP文件的多余输出

检查<?php标签之前有没有空格、换行或HTML代码；
可以直接去掉脚本末尾的?>标签，避免标签后意外出现的空格/换行被输出；
检查爬取代码中是否有echo、print等输出语句，这些都会破坏JSON结构。

3. 优化前端AJAX代码

（1）添加错误捕获，查看原始响应

先打印收到的原始数据，确认问题所在：

success: function(data) 
{
    console.log('原始响应内容:', data); // 先看实际收到的是什么
    try {
        var jsonData = JSON.parse(data);
        $.each(jsonData, function (key, val) 
        {
            console.log(val);
            bulletin_array.push(val);
        });
    } catch(e) {
        console.error('JSON解析失败:', e);
    }
}

（2）让jQuery自动解析JSON

添加dataType: 'json'，jQuery会自动处理JSON解析，同时在请求失败时触发error回调，方便排查：

$.ajax({
    type: 'POST',
    url: 'DataProcessor2.php',
    dataType: 'json', // 自动解析JSON
    success: function(data) 
    {
        var bulletin_array = [];
        $.each(data, function (key, val) 
        {
            console.log(val);
            bulletin_array.push(val);
        });
        // 后续代码...
    },
    error: function(xhr, status, error) {
        console.error('请求出错:', status, error);
        console.log('错误响应内容:', xhr.responseText);
    }
});

4. 优化数据库查询的安全性

用mysqli_fetch_assoc代替mysqli_fetch_row，通过字段名获取数据，避免数组索引越界导致的警告：

while ($row = mysqli_fetch_assoc($result)) 
{
    // 替换成你表中实际的字段名，比如id、title、content
    array_push($arr, $row['id'], $row['title'], $row['content']);
}

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