JSON 基础认知、数据转换与 Flask 前后端交互全解

小狗丹尼4002026-03-21 7:08

本文系统整理了 Web 开发入门核心知识点，涵盖JSON 数据基础认知 、JS/Python 与 JSON 双向转换 、Flask 框架基础使用 、网址链接核心认知 及Flask 结合 JSON 的前后端交互实战，内容由浅入深、从基础到拓展，兼顾知识点严谨性与实用性，适合编程入门者学习与复习参考。文中若存在表述疏漏之处，欢迎各位读者批评指正。

目录

  1. JSON 数据基础认知
  2. 前端 JS 与 JSON 数据的双向转换
  3. 后端 Python 与 JSON 数据的双向转换
  4. 网址链接核心组成与认知
  5. Flask 轻量级 Web 框架基础入门
  6. Flask 结合 JSON 实现前后端交互实战
  7. 核心知识点总结与避坑指南

一、JSON 数据基础认知

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

1.1 核心特性

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

1.2 JSON 与原生 JS 对象的区别

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

html 复制代码 
<!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 完整代码示例

html 复制代码 
<!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 复制代码 
# 导入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 环境安装

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

5.2 Flask 基础使用模板

python 复制代码 
# 导入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 扩展环境安装（解决跨域问题）

bash 复制代码 
pip install flask-cors

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

python 复制代码 
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 数据

后端完整代码
python 复制代码 
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）
html 复制代码 
<!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仅用于开发环境，生产环境需关闭。

结语

本文覆盖了 JSON 基础、数据转换、网络地址、Flask 框架及前后端交互的全流程知识点，是 Web 开发入门的核心内容。所有代码均可直接运行验证，适合初学者系统学习与日常复习。掌握这些内容，即可完成基础的前后端数据通信开发，为后续学习打下坚实基础。

相关推荐
zm-v-159304339864 小时前
Python 数据挖掘从入门到精通：回归 / 分类 / 聚类 / 关联分析完整教程
python·数据挖掘·回归
qq_417695059 小时前
机器学习与人工智能
jvm·数据库·python
漫随流水9 小时前
旅游推荐系统（view.py）
前端·数据库·python·旅游
yy我不解释10 小时前
关于comfyui的mmaudio音频生成插件时时间不一致问题（一）
python·ai作画·音视频·comfyui
紫丁香11 小时前
AutoGen详解一
后端·python·flask
FreakStudio11 小时前
不用费劲编译ulab了！纯Mpy矩阵micronumpy库，单片机直接跑
python·嵌入式·边缘计算·电子diy
清水白石00813 小时前
Free-Threaded Python 实战指南：机遇、风险与 PoC 验证方案
java·python·算法
飞Link13 小时前
具身智能核心架构之 Python 行为树 (py_trees) 深度剖析与实战
开发语言·人工智能·python·架构
桃气媛媛14 小时前
Pycharm常用快捷键
python·pycharm
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04Labelme从安装到标注：零基础完整指南05AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南06UV安装并设置国内源07小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08OpenClaw Control UI安全上下文访问配置09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）