🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[Python] json 模块入门！完全掌握 Web 开发必备的数据格式

要在电脑上通过命令提示符或 PowerShell 运行 Python，需要先下载并安装 Python。
如果你还没有安装，请参考Python安装与开发环境配置一文来完成安装。

大家好！几个月前，我还是一个对编程一窍不通的小白，现在已经能和 AI 搭档从零开始建立网站了。在这里，我想分享一下我在这个过程中学到的知识。

大家听到“JSON”这个词时，会想到什么呢？可能觉得“听起来好难……”“这是 Web 专家才用的东西吧？”。我一开始也是这么想的。但是，在网站制作，特别是开发酷炫的“动态网站”时，JSON 是一个绕不开的话题。而且一旦和它混熟了，它就会成为你最可靠的伙伴。

这篇文章会用全世界最通俗易懂的方式，结合我实际踩过的坑，来教你如何使用 Python 的 json 模块随心所欲地处理 JSON 数据。我的目标是，当你读完这篇文章时，能够一边动手实践一边感叹：“原来 JSON 是这么用的啊！” 我准备了很多可以直接复制粘贴就能运行的代码，让我们一起来体验“代码跑起来了！”的快感吧！

JSON 究竟是什么？为什么 Web 开发需要它？

我们先不管那些复杂的定义。简单来说，JSON 就是“不同程序之间交换信息时使用的通用语言”。

举个例子，假设你网站的后端（服务器）运行着 Python 小程序，它存有用户的个人信息（如姓名、年龄、爱好等）。现在，你想把这些信息传递给用户浏览器上运行的 JavaScript 小程序，用来显示一张精美的个人资料卡。

  1. Python 小程序先把信息翻译成世界通用语“JSON”再传过去。
  2. JavaScript 小程序接收到 JSON 后，再把它翻译成自己能懂的语言。
  3. 信息成功传递，个人资料卡顺利显示！

就像这样，JSON 在服务器端和前端之间的数据交换中扮演着不可或缺的“桥梁”角色。当我们从 Web API（一种从外部服务获取数据的机制）获取天气预报或新闻文章时，几乎 100% 用的都是 JSON 格式。是不是很方便？

在 Python 中操作 JSON 的 4 个基本魔法

Python 自带了一个名为 json 的标准模块，专门用来处理这个方便的 JSON 格式。你不需要 pip install，只要写一行 import json 就可以马上使用。

这个模块功能很多，但对于初学者来说，只要记住下面这 4 个函数（魔法咒语）就足够了！

你是不是觉得“名字这么像，好容易搞混啊！”？别担心，我也曾这么觉得（笑）。有一个简单的记忆方法。

只要记住结尾带 s 的 (dumps, loads) 是用来处理字符串 (String) 的。不带 s 的则是直接处理文件。这样就不会再混淆啦！

1. 将 Python 数据转换为 JSON 字符串: json.dumps()

首先，我们来试试把 Python 的字典 (dict) 数据转换成 JSON 格式的字符串。这是最基础的一步。 


# python-code
import json

# Python 的字典数据
user_data = {
    "name": "CopiCode 小明",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# 将 Python 字典转换为 JSON 格式的字符串
json_string = json.dumps(user_data)

print(json_string)
# 我们来检查一下类型
print(type(json_string))

执行结果:


{"name": "CopiCode \u5c0f\u660e", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
<class 'str'>

[常见问题①] 中文字符变成了 `\uXXXX`！

看到上面的结果，如果你发现“咦？名字怎么变成奇怪的符号了！”，那你的观察力真的很棒。这是一种“乱码”，我刚开始也在这里卡了很久。

原因是 json.dumps() 默认会把非 ASCII 字符（简单说就是非英文字母和数字的字符）进行转义（转换成安全的表示形式）。要解决这个问题，只需要加上一句咒语：ensure_ascii=False。 


# python-code
import json

user_data = {
    "name": "CopiCode 小明",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# 添加 ensure_ascii=False 来直接输出中文字符
json_string_jp = json.dumps(user_data, ensure_ascii=False)

print(json_string_jp)

执行结果:


{"name": "CopiCode 小明", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}

看，中文字符完美地显示出来了！如果你要开发中文的 Web 服务，ensure_ascii=False 几乎是你必不可少的伙伴。

[常见问题②] JSON 全挤在一行，难以阅读！

另一个问题是，当数据变多时，所有内容都挤在一行，非常不方便阅读。这个问题也可以通过一个选项来解决。指定 indent（缩进）参数，它会帮你添加换行和缩进，让代码更适合人类阅读。数字代表空格数，通常使用 4。 


# python-code
import json

user_data = {
    "name": "CopiCode 小明",
    "age": 30,
    "is_creator": True,
    "skills": ["HTML", "CSS", "JavaScript", "Python"]
}

# 同时指定 ensure_ascii=False 和 indent=4
json_string_pretty = json.dumps(user_data, ensure_ascii=False, indent=4)

print(json_string_pretty)

执行结果:


{
    "name": "CopiCode 小明",
    "age": 30,
    "is_creator": true,
    "skills": [
        "HTML",
        "CSS",
        "JavaScript",
        "Python"
    ]
}

怎么样？是不是一下子就清晰易读了？这两个选项经常一起使用，所以一定要记住它们。 Python 官方文档中也对这些选项有详细的解释。

2. 将 JSON 字符串转换回 Python 数据: json.loads()

接下来是反向操作。我们来把从 Web API 等地方收到的 JSON 格式的“字符串”转换回 Python 能处理的字典数据。我们会用到带 `s` 的 loads。 


# python-code
import json

# 假设从 Web API 收到了这样的字符串
received_json_string = """
{
    "id": "001",
    "productName": "神奇键盘",
    "price": 15800,
    "inStock": true
}
"""

# 将 JSON 字符串转换为 Python 字典
product_data = json.loads(received_json_string)

print(product_data)
# 我们来检查一下类型
print(type(product_data))

# 既然变成了字典，我们就可以通过键来获取值
print(f"商品名称: {product_data['productName']}")
print(f"价格: {product_data['price']} 日元")

执行结果:


{'id': '001', 'productName': '神奇键盘', 'price': 15800, 'inStock': True}
<class 'dict'>
商品名称: 神奇键盘
价格: 15800 日元

原本是字符串的 JSON，现在被漂亮地转换成了 Python 的字典 (dict)！这样我们就可以自由地处理数据，或者只提取需要的信息了。

3. 将 Python 数据写入 JSON 文件: json.dump()

接下来是文件操作。我们会用到不带 `s` 的 dump()。当你想保存网站的配置信息或者处理结果时，这个函数非常常用。

dump() 接收两个参数。第一个是你想写入的 Python 数据，第二个是文件对象。使用 with open(...) 语法是最安全、最普遍的做法。 


# python-code
import json

# 想要保存的配置数据
app_settings = {
    "theme": "dark",
    "language": "chinese",
    "notifications": {
        "email": True,
        "push": False
    },
    "version": "1.0.2"
}

# 'w' 代表写入模式 (write)
# 当包含中文字符时，指定 encoding='utf-8' 是一个好习惯
with open('settings.json', 'w', encoding='utf-8') as f:
    # indent 和 ensure_ascii 在这里同样适用
    json.dump(app_settings, f, indent=4, ensure_ascii=False)

print("已将配置写入 settings.json 文件。")

运行这段代码后，一个名为 settings.json 的文件会被创建在和你的 Python 脚本相同的目录下。文件里的内容会和我们用 dumps 美化后的一样，格式清晰易读。

4. 从 JSON 文件读取数据并转换为 Python 数据: json.load()

最后，我们来读取刚刚创建的 settings.json 文件。因为是文件操作，所以我们用不带 `s` 的 load()。 


# python-code
import json
import os # 导入 os 模块来检查文件是否存在

file_path = 'settings.json'

# 检查文件是否存在
if os.path.exists(file_path):
    # 'r' 代表读取模式 (read)
    with open(file_path, 'r', encoding='utf-8') as f:
        # 只需传入文件对象
        loaded_settings = json.load(f)

    print("已从 settings.json 加载配置。")
    print(loaded_settings)
    
    # 使用加载的数据进行处理
    print(f"当前主题设置: {loaded_settings['theme']}")
else:
    print(f"错误: 未找到 {file_path}")
    print("请先运行 json.dump() 的示例代码。")

执行结果:


已从 settings.json 加载配置。
{'theme': 'dark', 'language': 'chinese', 'notifications': {'email': True, 'push': False}, 'version': '1.0.2'}
当前主题设置: dark

到这里，4 个基本魔法你就全部掌握了！处理字符串用带 `s` 的 dumps/loads，处理文件用不带 `s` 的 dump/load。就这么简单！

[复制代码就能跑] 实践！用 JSON 数据动态创建个人资料卡

久等了！这里是本文的高潮部分。让我们总动员所有学过的知识，体验一下联动 Python 和 JavaScript，从 JSON 数据动态生成 HTML 内容的过程。

在实际的 Web 开发中，我们正是用这种方式来分离数据和视图的。只要体验过一次，你就能理解 JSON 的真正威力！

完整的可运行 HTML 代码

请复制以下所有代码，创建一个名为 profile.html 的文件并保存。然后，用你的网络浏览器打开它。 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从 JSON 数据生成的个人资料</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #121212;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            padding: 2rem;
            width: 320px;
            border: 1px solid #333;
        }
        .card h1 {
            color: #669df6;
            margin-top: 0;
            border-bottom: 2px solid #669df6;
            padding-bottom: 0.5rem;
        }
        .card p {
            line-height: 1.6;
        }
        .card .label {
            font-weight: bold;
            color: #8ab4f8;
        }
        .skills {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .skills li {
            background-color: #333;
            padding: 0.3rem 0.8rem;
            border-radius: 1rem;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<!-- 个人资料卡将插入此处 -->
<div id="profile-container"></div>

<!-- 
    [重点在这里！]
    正常情况下，这部分 JSON 数据应该由运行 Python 的服务器发送。
    但在这个示例中，为了模拟这个过程，我们直接将
    JSON 数据嵌入到了 <script> 标签中。
-->
<script id="user-json-data" type="application/json">
{
    "name": "AI 助手君",
    "age": 2,
    "bio": "我是一个擅长 Python 和 JavaScript 的 AI 助手。我会全力支持你的 Web 开发工作！",
    "is_active": true,
    "skills": ["数据分析", "Web 开发", "自然语言处理", "调试"]
}
</script>

<script>
    // 这段 JavaScript 代码会在浏览器中运行
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 从 <script> 标签获取 JSON 字符串
        var jsonScriptTag = document.getElementById('user-json-data');
        var jsonString = jsonScriptTag.textContent;

        // 2. 将 JSON 字符串转换为 JavaScript 对象
        var userData = JSON.parse(jsonString);

        // 3. 使用获取的数据构建 HTML 内容
        var container = document.getElementById('profile-container');
        
        // 生成技能列表的 HTML
        var skillsHtml = userData.skills.map(function(skill) {
            return '<li>' + skill + '</li>';
        }).join('');

        // 使用字符串拼接创建整个个人资料卡的 HTML
        var profileCardHtml = 
            '<div class="card">' +
                '<h1>' + userData.name + '</h1>' +
                '<p><span class="label">年龄:</span> ' + userData.age + ' 岁</p>' +
                '<p><span class="label">个人简介:</span> ' + userData.bio + '</p>' +
                '<p><span class="label">状态:</span> ' + (userData.is_active ? '在线' : '离线') + '</p>' +
                '<h2 style="color: #669df6; font-size: 1.2em;">技能</h2>' +
                '<ul class="skills">' +
                    skillsHtml +
                '</ul>' +
            '</div>';

        // 4. 将构建好的 HTML 插入到页面中
        container.innerHTML = profileCardHtml;
    });
</script>

</body>
</html>

用浏览器打开后，你应该能看到一个样式精美的个人资料卡。然而，你并没有在 HTML 文件里直接编写这些卡片元素！

在这段代码中，下面的 JavaScript 读取了写在 <script id="user-json-data"> 标签里的 JSON 数据。JSON.parse() 就是 JavaScript 版本的 json.loads()。然后，它用这些数据动态地构建 HTML，并将其插入到 id="profile-container" 的位置。

在实际的 Web 开发中，Python（服务器）会动态生成这部分 JSON 数据，然后嵌入到 HTML 模板中发送给浏览器。你刚刚就在这一个文件里，体验了这个最核心的机制。是不是很神奇？

总结：JSON 不可怕，它是你的终极武器！

这次，我结合自己的亲身经历，讲解了如何使用 Python 的 json 模块处理数据，以及它在 Web 开发中的重要性。

一开始可能会觉得有点难以入手，但一旦你理解了 JSON 的工作原理，你所能创建的网站类型就会大大拓宽。从与外部 API 对接到保存用户特定设置，可能性是无限的。

请随意修改本文中的代码，尝试一下“如果我这样改会怎么样？”。这种反复试验正是让你作为一名开发者成长的最佳调味剂！

下一步

当你熟悉了用 JSON 处理数据后，下一步可以学习如何在程序启动时从外部接收信息。学会处理命令行参数将使你能够创建更强大的工具。

使用 sys 模块处理命令行参数

相关模板