跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
Python大前端

JSON 基础、数据转换与 Flask 前后端交互实战

讲解 JSON 数据格式特性及键值对规则，演示 JS 对象与 JSON 字符串的双向转换方法，介绍 Python json 模块处理字典与 JSON 的转换。同时涵盖网址结构解析、Flask 框架安装与路由配置，并通过跨域设置实现前后端基于 JSON 的数据交互实战，适合 Web 开发入门者学习。

追风少年发布于 2026/3/23更新于 2026/5/3026 浏览

JSON 基础认知

JSON（JavaScript Object Notation）是轻量级、跨语言的数据交换格式，是前后端通信的通用标准，也是 Web 开发的基础必备知识。

1.1 核心特性

  1. 本质：特殊格式的字符串，可被所有编程语言解析；
  2. 结构：采用键值对形式存储数据；
  3. 严格规则：键名必须使用双引号包裹，单引号 / 无引号均不合法。

1.2 JSON 与原生 JS 对象的区别

通过代码直观区分合法 JSON 与 JS 对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 数据认知</title>
</head>
<body>
<script>
// 1. 原生 JS 对象（键无格式限制，数据类型为 object）
const jsObj = {姓名:"张三",年龄:18};
console.log(typeof jsObj); // 输出：object
// 2. 标准 JSON 字符串（键必须双引号，外层单引号，数据类型为 string）
const jsonStr = '{"姓名":"张三","年龄":18}';
console.log(typeof jsonStr); // 输出：string
// 3. 非标准 JSON（键用单引号，无法被正常解析）
const errorJson = "{'姓名':'张三','年龄':18}";
</script>
</body>
</html>

1.3 核心总结

数据类型本质键名规则合法性
JS 对象对象无引号 / 单引号 / 双引号均可非 JSON
标准 JSON字符串必须双引号合法
非标准 JSON字符串单引号非法

前端 JS 与 JSON 数据的双向转换

前端开发中，JS 对象与 JSON 字符串的相互转换是高频操作，仅需两个内置方法即可实现。

2.1 核心转换方法

  1. JSON.stringify(JS 对象)：JS 对象 → JSON 字符串（发送数据时使用）
  2. JSON.parse(JSON 字符串)：JSON 字符串 → JS 对象（接收数据时使用）

2.2 完整代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 与 JSON 转换</title>
</head>
<body>
<script>
// 1. 定义原始 JS 对象
const userInfo = {姓名:"李四",年龄:22,爱好:["编程","阅读"]};
// 2. JS 对象 转换为 JSON 字符串
const jsonData = JSON.stringify(userInfo);
console.log("JSON 字符串：", jsonData);
console.log("类型：", typeof jsonData); // string
// 3. JSON 字符串 还原为 JS 对象
const newObj = JSON.parse(jsonData);
console.log("JS 对象：", newObj);
console.log("类型：", typeof newObj); // object
</script>
</body>
</html>

后端 Python 与 JSON 数据的双向转换

Python 内置json模块，无需额外安装，可实现 Python 数据（字典为主）与 JSON 字符串的双向转换，是后端数据处理的基础。

3.1 核心转换方法

  1. json.dumps(字典)：Python 字典 → JSON 字符串
  2. json.loads(JSON 字符串)：JSON 字符串 → Python 字典

3.2 完整代码示例

# 导入 Python 内置 json 模块
import json

# 1. 定义 Python 字典
py_dict = {"姓名": "王五", "年龄": 25, "职业": "工程师"}
print(type(py_dict)) # <class 'dict'>

# 2. 字典转 JSON 字符串
json_str = json.dumps(py_dict, ensure_ascii=False) # ensure_ascii=False 支持中文
print(json_str)
print(type(json_str)) # <class 'str'>

# 3. JSON 字符串转回字典
new_dict = json.loads(json_str)
print(new_dict)
print(type(new_dict)) # <class 'dict'>

网址链接核心组成与认知

网址是访问网络资源的唯一标识，理解其结构是学习 Web 开发的基础，分为主体和参数两部分。

4.1 网址完整结构

协议://域名 (IP:端口)/路由？参数名=参数值&参数名=参数值

示例：https://taobao.com/search?page=1&q=手机

4.2 核心组成部分解析

  1. 网络协议：数据传输规则，http（普通）、https（加密安全）；
  2. IP 地址：设备在互联网的唯一标识，本地地址：127.0.0.1；
  3. 端口号：设备中程序的唯一标识，Flask 默认端口：5000；
  4. 域名：IP 地址的易记别名（如taobao.com）；
  5. 路由：网站内页面的访问路径（如/search）；
  6. 请求参数：传递给后端的数据，多参数用&连接。

Flask 轻量级 Web 框架基础入门

Flask 是 Python 最常用的轻量级 Web 框架，用于快速搭建后端服务，提供接口供前端调用。

5.1 环境安装

# 基础安装
pip install flask
# 国内镜像源（速度更快）
pip install flask -i https://pypi.mirrors.ustc.edu.cn/simple/

5.2 Flask 基础使用模板

# 导入 Flask 核心类
from flask import Flask

# 初始化应用（固定写法）
app = Flask(__name__)

# 定义路由：绑定访问路径与处理函数
@app.route('/')
def index():
    # 返回给前端的数据
    return "Flask 服务启动成功！"

# 自定义路由
@app.route('/user')
def get_user():
    return "用户信息接口"

# 程序入口：启动服务
if __name__ == '__main__':
    app.run(debug=True) # debug=True：开启调试模式，代码修改自动重启

5.3 核心知识点

  1. 访问地址：http://127.0.0.1:5000（本地默认地址）；
  2. 路由规则：一个路由对应一个函数，用于区分不同接口；
  3. 返回值：可返回字符串、HTML、JSON 等数据。

Flask 结合 JSON 实现前后端交互实战

JSON 是前后端数据交互的标准格式，本节整合前文所有知识点，实现完整的前后端通信。

6.1 扩展环境安装（解决跨域问题）

pip install flask-cors

6.2 场景 1：Flask 后端返回 JSON 数据

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 允许跨域请求

# 接口：返回标准 JSON 数据
@app.route('/api/userinfo', methods=['GET'])
def user_info():
    # Python 字典
    data = {
        "name": "小明",
        "age": 20,
        "hobby": ["篮球", "coding"]
    }
    # jsonify：自动转为标准 JSON 响应
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True, port=5000)

6.3 场景 2：Flask 接收前端 JSON 数据

后端完整代码

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# 1. 获取数据接口
@app.route('/api/userinfo', methods=['GET'])
def user_info():
    return jsonify({"name": "小明", "age": 20})

# 2. 接收前端 JSON 数据接口
@app.route('/api/submit', methods=['POST'])
def submit_data():
    # 解析前端发送的 JSON 数据
    req_data = request.get_json(force=True)
    name = req_data.get("name")
    age = req_data.get("age")
    # 返回处理结果
    return jsonify({
        "status": "success",
        "message": f"接收成功：{name}，年龄{age}"
    })

if __name__ == '__main__':
    app.run(debug=True)

前端调用代码（JS+JSON）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前后端交互</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button onclick="sendData()">发送数据到后端</button>
<script>
function sendData(){
    // 1. JS 对象
    const obj = {name:"小红", age:19};
    // 2. 转为 JSON 字符串
    const json = JSON.stringify(obj);
    // 3. 发送请求
    $.ajax({
        url: "http://127.0.0.1:5000/api/submit",
        type: "POST",
        contentType: "application/json",
        data: json,
        success: res => {
            // 自动转为 JS 对象
            alert(res.message);
        }
    })
}
</script>
</body>
</html>

6.4 前后端交互完整流程

前端：JS 对象 → JSON 字符串 → 发送请求
后端：JSON 字符串 → Python 字典 → 处理数据 → JSON 响应
前端：JSON 响应 → JS 对象 → 页面渲染

核心知识点总结与避坑指南

7.1 核心知识点汇总

  1. JSON：跨语言数据格式，键必须双引号，本质是字符串；
  2. JS 转换：JSON.stringify() / JSON.parse()；
  3. Python 转换：内置json模块，dumps() / loads()；
  4. Flask 基础：路由绑定函数，jsonify返回标准 JSON；
  5. 网址：协议 + 域名 + 路由 + 参数，是 Web 访问的基础；
  6. 前后端交互：JSON 是唯一数据载体，跨域需用flask-cors。

7.2 常见避坑点

  1. JSON 键名必须用双引号，单引号会导致解析失败；
  2. Python 处理中文需加ensure_ascii=False；
  3. 前端发送 JSON 必须声明contentType: application/json；
  4. Flask 前后端端口不同时，必须配置跨域；
  5. 开启debug=True仅用于开发环境，生产环境需关闭。

目录

  1. JSON 基础认知
  2. 1.1 核心特性
  3. 1.2 JSON 与原生 JS 对象的区别
  4. 1.3 核心总结
  5. 前端 JS 与 JSON 数据的双向转换
  6. 2.1 核心转换方法
  7. 2.2 完整代码示例
  8. 后端 Python 与 JSON 数据的双向转换
  9. 3.1 核心转换方法
  10. 3.2 完整代码示例
  11. 导入 Python 内置 json 模块
  12. 1. 定义 Python 字典
  13. 2. 字典转 JSON 字符串
  14. 3. JSON 字符串转回字典
  15. 网址链接核心组成与认知
  16. 4.1 网址完整结构
  17. 4.2 核心组成部分解析
  18. Flask 轻量级 Web 框架基础入门
  19. 5.1 环境安装
  20. 基础安装
  21. 国内镜像源（速度更快）
  22. 5.2 Flask 基础使用模板
  23. 导入 Flask 核心类
  24. 初始化应用（固定写法）
  25. 定义路由：绑定访问路径与处理函数
  26. 自定义路由
  27. 程序入口：启动服务
  28. 5.3 核心知识点
  29. Flask 结合 JSON 实现前后端交互实战
  30. 6.1 扩展环境安装（解决跨域问题）
  31. 6.2 场景 1：Flask 后端返回 JSON 数据
  32. 接口：返回标准 JSON 数据
  33. 6.3 场景 2：Flask 接收前端 JSON 数据
  34. 后端完整代码
  35. 1. 获取数据接口
  36. 2. 接收前端 JSON 数据接口
  37. 前端调用代码（JS+JSON）
  38. 6.4 前后端交互完整流程
  39. 核心知识点总结与避坑指南
  40. 7.1 核心知识点汇总
  41. 7.2 常见避坑点
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • C++ 封装红黑树实现 map 和 set
  • Docker 部署 MoviePilot V2 自动化影视管理平台教程
  • JDK 17 安装与环境配置实战指南
  • AstrBot 与 NapCat 部署智能 QQ 机器人及 cpolar 公网访问指南
  • Llama-3.2-3B代码审查：基于Java面试题的质量评估体系
  • Linux 进程池原理与 C++ 实现详解
  • 21m/s！UZH RPG组T-RO新作AC-MPC：微分MPC赋能强化学习，实现超人级无人机竞速
  • DeepSeek 深度使用指南：提示词技巧与本地知识库搭建
  • MySQL 数据库基础：概念、架构与核心操作
  • FPGA 中基于 LED 的 2 选 1 多路选择器实现
  • Web 扫雷游戏项目实现与说明
  • C++大模型 SDK 开发：流式交互协议 SSE 解析与 httplib 实现原理
  • OpenClaw 多会话管理与子代理功能详解
  • Unity VR 眼镜端高分辨率全景视频播放性能优化
  • OpenCode 集成 Kimi K2.5 配置与使用指南
  • LLaMA-Factory 微调多模态大模型 Qwen3-VL
  • Layui 集成 Unity WebGL 时 Tab 切换黑屏的修复方案
  • Spring AI 实战：基于 Ollama 构建离线私有化 AI 服务方案
  • Spring AI 实战：基于 Ollama 构建离线私有化 AI 服务
  • ClawdBot 镜像免配置：内置 Web UI 控制台，模型/通道/配置可视化

相关免费在线工具

  • curl 转代码

    解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online