JSON 基础、数据转换与 Flask 前后端交互实战 | 极客日志

Python大前端

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

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

追风少年发布于 2026/3/23更新于 2026/7/2244 浏览

JSON 基础认知

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

1.1 核心特性

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

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>
</>

相关免费在线工具

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

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

<!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 模块
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'>

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

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

# 导入 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：开启调试模式，代码修改自动重启

pip install flask-cors

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)

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)

<!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>

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

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

JSON 基础认知

1.1 核心特性

1.2 JSON 与原生 JS 对象的区别

更多推荐文章

相关免费在线工具

1.3 核心总结

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

2.1 核心转换方法

2.2 完整代码示例

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

3.1 核心转换方法

3.2 完整代码示例

网址链接核心组成与认知

4.1 网址完整结构

4.2 核心组成部分解析

Flask 轻量级 Web 框架基础入门

5.1 环境安装

5.2 Flask 基础使用模板

5.3 核心知识点

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

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

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

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

后端完整代码

前端调用代码（JS+JSON）

6.4 前后端交互完整流程

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

7.1 核心知识点汇总

7.2 常见避坑点

更多推荐文章

相关免费在线工具

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

JSON 基础认知

1.1 核心特性

1.2 JSON 与原生 JS 对象的区别

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

更多推荐文章

相关免费在线工具

1.3 核心总结

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

2.1 核心转换方法

2.2 完整代码示例

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

3.1 核心转换方法

3.2 完整代码示例

网址链接核心组成与认知

4.1 网址完整结构

4.2 核心组成部分解析

Flask 轻量级 Web 框架基础入门

5.1 环境安装

5.2 Flask 基础使用模板

5.3 核心知识点

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

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

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

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

后端完整代码

前端调用代码（JS+JSON）

6.4 前后端交互完整流程

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

7.1 核心知识点汇总

7.2 常见避坑点

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

更多推荐文章

相关免费在线工具