如何将Python json.dump()输出内容在HTML的<p>标签中显示？

看来你是想实现Python生成JSON字符串，再用HTML+JavaScript解析并展示的功能对吧？我把整个流程补全并整理清楚啦：

1. Python生成JSON字符串（或导出为文件） #

咱先从Python这边说起，用json模块就能轻松把字典转成JSON格式。如果你只是需要生成字符串直接传给前端，用json.dumps()就够；如果想把JSON保存成文件供前端读取，json.dump()会更方便：

生成JSON字符串 #

import json

# 定义Python字典格式的原始数据
pythonDictionary = {'name':'Bob', 'age':44, 'isEmployed':True}

# 把字典转成标准JSON格式的字符串
dictionaryToJson = json.dumps(pythonDictionary)

# 可以打印确认格式是否正确
print(dictionaryToJson)
# 输出结果: {"name": "Bob", "age": 44, "isEmployed": true}

导出为JSON文件（可选） #

如果需要前端通过文件读取的方式获取JSON数据，加上这行代码就能生成本地JSON文件：

# 把字典写入到user_data.json文件中
with open('user_data.json', 'w') as f:
    json.dump(pythonDictionary, f)

2. HTML+JavaScript解析并展示JSON #

接下来补全你的前端代码，这里分两种常见的简单场景：

场景1：直接嵌入JSON字符串到前端 #

把Python生成的dictionaryToJson字符串直接放到JS里，解析后展示到页面上：

<!DOCTYPE html>
<html>
<body>
<h1>用户信息展示</h1>
<p id="user-info"></p>

<script>
// 直接使用Python生成的JSON字符串
const jsonString = '{"name": "Bob", "age": 44, "isEmployed": true}';

// 把JSON字符串解析成JavaScript对象
const userData = JSON.parse(jsonString);

// 拼接成可读性高的HTML内容，插入到页面指定位置
document.getElementById("user-info").innerHTML = `
  <strong>姓名:</strong> ${userData.name}<br>
  <strong>年龄:</strong> ${userData.age}<br>
  <strong>是否在职:</strong> ${userData.isEmployed ? '是' : '否'}
`;
</script>
</body>
</html>

场景2：从本地JSON文件读取数据（用Fetch API） #

如果之前已经把JSON导出成了user_data.json文件，用Fetch API就能异步读取并展示：

<!DOCTYPE html>
<html>
<body>
<h1>用户信息展示</h1>
<p id="user-info"></p>

<script>
// 异步读取本地JSON文件
fetch('user_data.json')
  .then(response => response.json())
  .then(userData => {
    // 解析成功后渲染数据到页面
    document.getElementById("user-info").innerHTML = `
      <strong>姓名:</strong> ${userData.name}<br>
      <strong>年龄:</strong> ${userData.age}<br>
      <strong>是否在职:</strong> ${userData.isEmployed ? '是' : '否'}
    `;
  })
  .catch(error => {
    // 处理读取失败的情况
    document.getElementById("user-info").innerHTML = `读取数据失败: ${error}`;
  });
</script>
</body>
</html>

小提醒 #

• JSON语法有严格要求：字符串必须用双引号，布尔值是小写的true/false，不过json.dumps()会自动帮你处理这些细节，不用手动调整
• 如果是前后端分离的场景，通常会用Python后端提供API接口，前端通过AJAX请求获取JSON，上面的Fetch例子就是类似的思路

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