使用jQuery如何将AJAX返回的JSON结果展示在HTML页面

• 核心问题：你代码中直接传入result['data']调用.html()方法，而根据你给出的返回结构，result.data是一个包含多个属性的JS对象，jQuery的.html()方法仅支持传入字符串格式的HTML内容或文本，传入对象不会被自动序列化输出，因此页面无内容显示。
• 解决方式1：如果需要完整展示data对象的所有内容（比如调试场景），可以用JSON.stringify()将对象转为格式化的JSON字符串后再插入页面：

.done(function(result, textStatus, jqXHR) {
    console.log(result);
    if (result.status.name == "ok") {
        // 第三个参数为缩进空格数，可让输出的JSON格式更易读
        $('#txtResult').html(JSON.stringify(result.data, null, 2));
    }
})

• 解决方式2：如果需要按业务需求自定义展示字段，可以手动提取对象属性拼接成HTML结构再插入：

.done(function(result, textStatus, jqXHR) {
    console.log(result);
    if (result.status.name == "ok") {
        const data = result.data;
        const showHtml = `
            <p>国家代码：${data.countryCode}</p>
            <p>国家名称：${data.countryName}</p>
            <p>距离：${data.distance}</p>
            <p>可用语言：${data.languages}</p>
        `;
        $('#txtResult').html(showHtml);
    }
})

• 额外排查点：如果修改后仍无内容，需要确认页面中确实存在id="txtResult"的段落元素，检查id是否存在拼写错误、大小写不匹配问题。

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