Ajax实现字符串转对象并在HTML页面展示对象的方法

嘿，我懂你现在的需求——你不想把返回的JSON数据再转成字符串展示，而是要以清晰的对象结构呈现出来对吧？咱们来一步步调整你的代码，解决这个问题：

首先，先看你当前代码里的小问题：你已经在success回调里用JSON.parse(rt)把服务器返回的字符串转换成了JavaScript对象，但之后遍历的时候又用JSON.stringify(val)把每个子对象转回了字符串，所以最终页面上显示的还是JSON字符串，不是结构化的对象。

下面给你两种实用的解决方案：

方案1：格式化字符串+<pre>标签（简单直观） #

这种方法会把对象转换成带缩进的格式化字符串，放在<pre>标签里保留换行和缩进，看起来和控制台里的对象结构差不多：

修改后的完整代码：

function post(path, data, disp_id) {
    var json = JSON.stringify(data);
    $.ajax({
        url: path,
        type: "POST",
        data: json,
        contentType: "application/json", // 建议加上，告诉服务器请求体是JSON格式
        success: function(rt) {
            console.log(rt);
            // 先确保数据是对象（如果jQuery已经自动解析了就不用再parse）
            var jsonData = typeof rt === 'string' ? JSON.parse(rt) : rt;
            $('#'+disp_id).empty();
            $.each(jsonData, function(i, val) {
                console.log(val);
                // 用JSON.stringify的格式化参数+pre标签展示
                $('#'+disp_id).append('<pre>' + JSON.stringify(val, null, 2) + '</pre><br/>');
            })
        },
        error: function(){
            alert("error");
        }
    });
};

关键调整点： #

• 加上contentType: "application/json"：发送JSON数据时，告诉服务器请求体的格式，避免解析错误
• JSON.stringify(val, null, 2)：第三个参数2表示用2个空格缩进，让输出的字符串更易读
• <pre>标签：保留字符串里的换行和缩进，让结构更清晰

方案2：手动渲染嵌套列表（更灵活的层级展示） #

如果你想要更清晰的层级结构，比如区分键值对的层级关系，可以写一个辅助函数把对象转换成嵌套的HTML列表：

首先添加一个渲染对象的辅助函数：

function renderObject(obj) {
    // 处理null和非对象的情况
    if (obj === null) return 'null';
    if (typeof obj !== 'object') return typeof obj === 'string' ? `"${obj}"` : obj;
    
    var html = '<ul>';
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var value = obj[key];
            html += `<li><strong>${key}:</strong> ${renderObject(value)}</li>`;
        }
    }
    html += '</ul>';
    return html;
}

然后修改success回调里的append部分：

$.each(jsonData, function(i, val) {
    console.log(val);
    $('#'+disp_id).append(renderObject(val) + '<br/>');
})

这种方式会把对象的每个键值对都做成列表项，嵌套对象会生成子列表，层级非常清晰，适合查看复杂的嵌套数据。

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