JSON嵌套编码问题：PHP返回数据在AJAX中无法正常访问

嘿，你遇到的其实是JSON编码时的一个常见小坑：你把原始的JSON字符串（$data）直接塞进数组再做json_encode，这就导致返回给前端的returnData[1]依然是字符串格式，而不是可以直接访问属性的JSON对象。所以当你尝试用returnData[1]["resultsPage"]去取值时，自然会抛出Cannot read property 'results' of undefined的错误——毕竟字符串根本没有这些属性嘛。

最优解决方案 #

别直接传递原始JSON字符串，而是在PHP端先把$data解码成PHP数组/对象，再和生成的HTML一起打包成数组，最后统一做json_encode。这样前端拿到的响应里，第二个元素就是已经解析好的JSON对象，直接就能访问里面的属性了。

代码修改示例 #

1. PHP端调整

把原来的代码片段：

$processedReturnArray = array($cleanHTML, $data);
echo json_encode($processedReturnArray);

改成：

// 先把原始JSON字符串解码为PHP关联数组（加true参数），或者对象（不加true）
$decodedApiData = json_decode($data, true); 
$processedReturnArray = array($cleanHTML, $decodedApiData);
echo json_encode($processedReturnArray);

小贴士：如果用json_decode($data)（不加第二个参数），会得到PHP对象，前端拿到的就是JS对象，用.语法访问属性；加true则转成关联数组，前端拿到的是JS对象（因为json_encode后数组会转成JS对象），两种方式都能用，看你习惯哪种。

2. 前端JS优化

其实现在后端返回的是标准JSON，你可以让jQuery自动帮你解析，不用手动调用JSON.parse——只需要在AJAX请求里加上dataType: 'json'参数：

jQuery(document).ready( function($) {
    $("#searchFormSubmit").click(function(event) { // 这里要把event作为参数传进来，避免隐式依赖的问题
        event.preventDefault();
        console.log("In First Part of Search Submit!");
        var address = $('#address').val();
        $.ajax({
            url : the_ajax_script.ajaxurl,
            type : 'post',
            dataType: 'json', // 告诉jQuery自动解析JSON响应
            data : {
                action : 'travel_app_ajaxdata',
                thangs : $('#CoreSearchForm').serialize()
            },
            success : function( returnData ) { // 这里直接拿到解析好的数组
                console.log("This is my Clean HTML: " + returnData[0]);
                // 打印对象的时候用JSON.stringify，不然控制台只会显示[Object object]
                console.log("This is my Location data: " + JSON.stringify(returnData[1])); 
                // 直接用点语法访问属性，数组形式returnData[1]["resultsPage"]也可以
                console.log("TEST DATA - EVENT: " + returnData[1].resultsPage); 
                $('.return_data').html(returnData[0]);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus);
                alert("Error: " + errorThrown);
            }
        });
    });
});

另外提一句，原代码里的click事件没有传event参数，虽然有些浏览器能隐式识别，但显式传参能避免兼容性问题，建议加上。

为什么这个方案更优？ #

• 避免了前端二次解析JSON的步骤，减少出错概率
• 后端统一处理所有JSON编码逻辑，数据结构更清晰
• 符合JSON的使用规范，不会出现“字符串嵌套JSON字符串”的混乱结构

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