PHP Simple HTML Dom生成JSON无法在JavaScript中解析的问题

问题分析 #

你遇到的JSON解析错误，核心原因有两个：

1. PHP端可能存在额外输出（比如grab_page函数的冗余输出、PHP警告/错误信息、代码中的空格换行），导致JSON响应末尾混入非JSON字符；
2. 当前JSON结构设计不规范，将status和数据分散在数组的不同元素中，既不符合前后端交互的常规格式，也会导致JS逻辑判断出错。

修复方案 #

1. 修正PHP端的JSON生成逻辑 #

调整响应结构为规范的对象格式，同时确保没有多余输出干扰JSON：

function getUrls($url){
    // 清空输出缓冲区，清除之前可能存在的冗余内容
    ob_clean();
    // 设置正确的JSON响应头，明确告知客户端返回类型
    header('Content-Type: application/json');
    
    // 规范响应结构：包含状态码和数据数组
    $response = [
        "status" => 1,
        "data" => []
    ];
    
    $fbPost = grab_page($url);
    $postUsers = new simple_html_dom();
    $postUsers->load($fbPost);
    
    foreach($postUsers->find('#m_story_permalink_view h3 a') as $fbUserDiv) {
        $data = $fbUserDiv->href;
        // 解码HTML实体（将&转为&），保证URL格式正确
        $data = html_entity_decode($data);
        $response["data"][] = [
            'user_url' => $data
        ];
    }
    
    echo json_encode($response);
    // 输出后立即终止脚本，避免后续代码产生额外输出
    exit;
}

2. 修正JavaScript端的AJAX处理逻辑 #

适配新的JSON结构，同时修复textarea覆盖问题：

$(document).ready(function(e){
    $("#getUsersId").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: "post",
            url: "fbReq.php",
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData:false,
            success: function (response) {
                if(response.status == 1){
                    console.log("success");
                    const textarea = $("#myTextarea");
                    textarea.val(''); // 先清空文本域
                    // 循环遍历数据数组，追加每个URL到文本域
                    $.each(response.data, function(key, value) { 
                        textarea.val(textarea.val() + value.user_url + '\n');
                    });
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
                // 调试用：查看服务器返回的原始内容，快速定位问题
                console.log("原始响应内容:", jqXHR.responseText);
            }
        });
    });
});

关键修复点说明 #

• PHP端：
  • ob_clean() 清除输出缓冲区的冗余内容（比如之前的echo、空格、PHP警告）；
  • 设置Content-Type: application/json头，让浏览器正确识别响应类型；
  • 统一响应结构为{status: 状态码, data: 数据数组}，符合前后端交互的常规规范；
  • html_entity_decode() 处理URL中的HTML实体，避免&这类编码影响URL可用性；
  • exit 确保脚本输出JSON后立即终止，防止后续代码产生额外输出。
• JS端：
  • 调整循环对象为response.data，适配新的响应结构；
  • 修复textarea覆盖问题，改为追加内容而非直接赋值；
  • 添加原始响应内容打印，方便调试时快速定位问题。

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