如何正确解析PHP返回的对象数组以解决Ajax JSON解析错误？

我来帮你排查这个JSON解析错误的问题，看了你的代码和返回的JSON结果，主要有几个关键点需要修正：

1. 修复PHP数组初始化的多余空元素 #

你初始化$roleList的时候用了$roleList[] = "";，导致返回的JSON开头多了一个空字符串元素""——虽然这个JSON本身语法是有效的，但这是不必要的冗余，而且可能在前端循环时引发潜在问题。把数组初始化改成空数组即可：

// 原来的错误写法
// $roleList[] = "";

// 正确的初始化方式
$roleList = [];

2. 添加JSON响应头（关键！） #

你的PHP脚本没有设置响应内容类型为JSON，这是导致jQuery触发parsererror的核心原因之一。服务器默认会把响应标记为text/html，而jQuery的dataType: 'JSON'要求响应必须是正确的JSON MIME类型。在输出JSON之前添加以下代码：

header('Content-Type: application/json');

3. 确保PHP脚本没有多余输出 #

检查你的get_all_roles.php以及任何被引入的文件，确保没有多余的空格、换行、echo或var_dump输出——这些内容会附加在JSON前面，导致返回的内容不是纯JSON，直接触发解析错误。

修改后的完整getAllRoles()实现 #

function getAllRoles() {
    $roleList = []; // 初始化空数组
    try {
        $SQL = "CALL getAllRoles()";
        $sp_getAllRoles = $this->connection->prepare($SQL);
        $sp_getAllRoles->execute();
        $resultSet = $sp_getAllRoles->fetchAll(PDO::FETCH_ASSOC);
        
        foreach ($resultSet as $row) {
            $roleId = $row['role_id'];
            $roleName = $row['role_name'];
            $roleList[] = array("roleId" => $roleId, "roleName" => $roleName);
        }
        
        header('Content-Type: application/json'); // 设置JSON响应头
        echo json_encode($roleList);
    } catch (PDOException $e) {
        // 异常时也返回JSON格式的错误信息，避免前端解析失败
        header('Content-Type: application/json');
        echo json_encode(['error' => $e->getMessage()]);
        exit;
    }
}

前端代码优化（可选） #

你的JS代码本身没问题，不过可以用jQuery的$.each方法让循环更简洁：

function loadRolesToDropDown() { 
    var url = 'controller/get_all_roles.php'; 
    $.ajax({ 
        url: url, 
        type: 'GET', 
        dataType: 'JSON', 
        success: function (data) { 
            $("#roledropdown").empty();
            // 用$.each遍历数组更直观
            $.each(data, function(index, role) {
                $("#roledropdown").append(`<option value="${role.roleId}">${role.roleName}</option>`);
            });
        }, 
        error: function (x, e) { 
            if (x.status == 0) { 
                alert('You are offline!!\n Please Check Your Network.'); 
            } else if (x.status == 404) { 
                alert('Requested URL not found.'); 
            } else if (x.status == 500) { 
                alert('Internal Server Error.'); 
            } else if (e == 'parsererror') { 
                alert('Error.\nParsing JSON Request failed.'); 
            } else if (e == 'timeout') { 
                alert('Request Time out.'); 
            } else { 
                alert('Unknown Error.\n' + x.responseText); 
            } 
        } 
    }); 
}

测试验证 #

修改完成后，直接在浏览器访问controller/get_all_roles.php，检查返回的内容是不是纯JSON（比如[{"roleId":1,"roleName":"Administrator"},...]），没有任何多余的空格或文本。如果返回的是纯JSON，那前端的解析错误应该就解决了。

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