讲解 JSON 数据格式特性及键值对规则，演示 JS 对象与 JSON 字符串的双向转换方法，介绍 Python json 模块处理字典与 JSON 的转换。同时涵盖网址结构解析、Flask 框架安装与路由配置，并通过跨域设置实现前后端基于 JSON 的数据交互实战，适合 Web 开发入门者学习。
JSON（JavaScript Object Notation）是轻量级、跨语言的数据交换格式，是前后端通信的通用标准，也是 Web 开发的基础必备知识。
通过代码直观区分合法 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>
| 数据类型 | 本质 | 键名规则 | 合法性 |
|---|---|---|---|
| JS 对象 | 对象 | 无引号 / 单引号 / 双引号均可 | 非 JSON |
| 标准 JSON | 字符串 | 必须双引号 | 合法 |
| 非标准 JSON | 字符串 | 单引号 | 非法 |
前端开发中，JS 对象与 JSON 字符串的相互转换是高频操作，仅需两个内置方法即可实现。
JSON.stringify(JS 对象)：JS 对象 → JSON 字符串（发送数据时使用）JSON.parse(JSON 字符串)：JSON 字符串 → JS 对象（接收数据时使用）<!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 字符串的双向转换，是后端数据处理的基础。
json.dumps(字典)：Python 字典 → JSON 字符串json.loads(JSON 字符串)：JSON 字符串 → 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 开发的基础，分为主体和参数两部分。
协议://域名 (IP:端口)/路由？参数名=参数值&参数名=参数值
示例：https://taobao.com/search?page=1&q=手机
http（普通）、https（加密安全）；127.0.0.1；5000；taobao.com）；/search）；&连接。Flask 是 Python 最常用的轻量级 Web 框架，用于快速搭建后端服务，提供接口供前端调用。
# 基础安装
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：开启调试模式，代码修改自动重启
http://127.0.0.1:5000（本地默认地址）；JSON 是前后端数据交互的标准格式，本节整合前文所有知识点，实现完整的前后端通信。
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.stringify() / JSON.parse()；json模块，dumps() / loads()；jsonify返回标准 JSON；flask-cors。ensure_ascii=False；contentType: application/json；debug=True仅用于开发环境，生产环境需关闭。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online