一文掌握 jQuery + Flask 全栈核心知识点（前端交互 + 后端接口 + 前后端联调）

前言

做 Web 开发，本质上是前端 + 后端两半：前端负责「用户看到什么、点了有什么反应」，后端负责「数据从哪来、存到哪去」。

• 前端：用 jQuery 做交互 —— 选元素、改内容、绑事件、发请求。
• 后端：用 Flask 做接口 —— 接请求、处理数据、查数据库、返回结果。

本文把这两部分的核心知识点整合成一篇，重点讲清楚前端发请求 ↔ 后端处理 ↔ 返回数据这条完整链路。读完并跑通文末的「留言板」示例，你就真正入门了全栈开发。

💡 关键认知：你学的前端 $.ajax() 和后端的 @app.route() 是一对。前端发出请求，后端路由接收处理，再返回 JSON，前端再显示。理解了这层对应关系，前后端就通了。

第一部分：前端篇 —— jQuery 核心知识点

1.1 jQuery 是什么

jQuery 是一个 JavaScript 函数库，封装了原生 JS 的 DOM 操作、事件处理和 Ajax 请求，让代码更简洁。典型写法是 $(选择器).方法()。

// 原生 JS
document.getElementById("pageTitle").innerHTML = "新标题";

// jQuery
$("#pageTitle").text("新标题");

1.2 核心语法：$(选择器). 方法 ()

记住：先选中，再操作。所有代码通常包在 $(function(){ … }) 里，等页面加载完再执行。

1.3 元素选择器

$("#pageTitle") // # 按 id 找（唯一）
$(".message") // . 按 class 找（批量）

1.4 内容操作：.val () 和 .text ()

$("#username").val("张三"); // 读写表单值（input/textarea/select）
$("#description").text("新文字"); // 读写普通元素的纯文本

无参数 = 读取，有参数 = 修改。.text() 当纯文本，.html() 当 HTML 解析。

1.5 层级定位：.parent () /.siblings () /.children ()

$(this).parent().css("border", "2px solid red"); // 直接父元素
$(this).siblings().css("background-color", "#fee2e2"); // 兄弟元素（不含自己）
$("#container").children().css("color", "blue"); // 直接子元素

1.6 样式修改：.css ()

$("#box").css("color", "red"); // 改一个属性
$("#box").css({ "color": "white", // 一次改多个
"background-color": "#2563eb" });
var c = $("#box").css("color"); // 读取

1.7 动态追加：.append ()

$("#list").append("<li>新的列表项</li>"); // 追加 HTML 字符串
$("#list").append($("<li></li>").text("安全写法")); // 先建元素再写入（防 XSS）

1.8 Ajax 请求：$.ajax () 和 $.post ()

$.ajax({
url: "/api/posts/1",
type: "GET",
dataType: "json",
success: function(res) { $("#result").text(res.title); }, // 成功
error: function() { console.log("失败"); } // 失败
});

$.post("/api/posts", { title: "标题" }, function(res) {
console.log(res);
}, "json");

1.9 前端方法速查表

第二部分：后端篇 —— Flask 必掌握知识点

做后端，核心链路是：接请求 → 处理数据 → 查数据库 → 返回结果。下面每个知识点都配 Flask 代码。

2.1 Python 基础（地基）

变量、函数、if/for、字典、列表、类。重点补字典（后端处理 JSON 全靠它）：

user = {"name": "张三", "age": 20}
print(user["name"]) # 张三

2.2 HTTP 协议（地基，最易忽略）

浏览器和服务器对话的规则：

• 请求：浏览器发「访问 /user/1，方法 GET，带数据 xxx」
• 响应：服务器回「状态码 200，内容 JSON」
• GET = 取数据（查）；POST = 提交数据（增改）
• 状态码：200 成功、404 没找到、500 服务器出错

前端的 $.get() / $.post() 就是向 Flask 发 HTTP 请求，后端再响应。前端 Ajax ↔ 后端路由，是一对。

2.3 Flask 路由

@app.route 把「网址」和「函数」绑起来：

from flask import Flask
app = Flask(__name__)

@app.route('/') # 根路径
def index():
return "首页"

@app.route('/user/<int:uid>') # 路径参数 /user/123
def user(uid):
return f"这是用户 {uid} 号"

2.4 请求与响应（核心，必须熟练）

后端最重要的能力：拿前端数据、返回数据给前端。

from flask import request, jsonify, render_template

@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form.get('username') # 拿表单数据
# 拿 JSON：data = request.get_json()
return jsonify({"msg": "登录成功", "user": username})
return render_template('login.html') # GET 返回页面

2.5 数据库 CRUD（核心，后端真正的价值）

后端 90% 的工作是「存数据、查数据」。用 SQLAlchemy：

class User(db.Model): # 一张"用户"表
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80))

# 增删改查（CRUD）—— 后端四大基本功
user = User(name="张三") # Create 增
db.session.add(user); db.session.commit()

u = User.query.get(1) # Read 查
u.name = "李四"; db.session.commit() # Update 改

db.session.delete(u); db.session.commit() # Delete 删

CRUD（增删改查）是后端最核心的四个动作，一切功能（注册、发文章、下单）本质都是它们。

2.6 返回 JSON 接口（核心，连接前端）

前端 Ajax 要的是数据，不是整页 HTML。所以后端要写「接口」：

@app.route('/api/posts')
def posts():
data = [{"id": 1, "title": "第一篇"}, {"id": 2, "title": "第二篇"}]
return jsonify(data) # 返回 JSON，前端 $.ajax 接收

2.7 模板渲染 Jinja2（做「不分离」页面时用）

在 HTML 里写 Python 逻辑：

<ul>
{% for post in posts %}
<li>{{ post.title }}</li> <!– 输出变量 –>
{% endfor %}
</ul>
{% if user %} 你好，{{ user.name }} {% endif %}

2.8 会话 Session（做登录用）

from flask import session
session["user_id"] = 1 # 存登录状态
session.pop("user_id", None) # 退出登录清除

2.9 后端知识点速查表

第三部分：前后端联调 —— 打通完整链路

3.1 联调的核心流程

一条完整的前后端交互链路是这样的：

前端 jQuery 后端 Flask
─────────────────────────────────────────────────
$.post("/api/messages", ──→ @app.route('/api/messages', methods=['POST'])
{ content: "你好" }) request.form.get("content") ← 收数据
↓ 存数据库
db.session.add(…); commit()
return jsonify({…}) ← 返 JSON
success: function(res) ←── （响应返回给前端）
$("#list").append(…) 前端把返回的数据显示出来

记住这四步：① 前端发请求 → ② 后端收数据 → ③ 后端存库 / 查库 → ④ 后端返 JSON，前端显示。

3.2 完整示例：留言板（前后端联调实战）

一个最简留言板，把前面所有知识串起来。

后端 app.py：

from flask import Flask, render_template, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///message.db'
db = SQLAlchemy(app)

class Message(db.Model): # 留言表
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String(200))

@app.route('/')
def index():
return render_template('index.html') # 返回页面

@app.route('/api/messages', methods=['GET']) # 查：返回所有留言
def get_messages():
msgs = Message.query.all()
return jsonify([{"id": m.id, "content": m.content} for m in msgs])

@app.route('/api/messages', methods=['POST']) # 增：新增一条留言
def add_message():
content = request.form.get("content") # 收前端数据
msg = Message(content=content)
db.session.add(msg) # 存库
db.session.commit()
return jsonify({"id": msg.id, "content": msg.content})

if __name__ == '__main__':
with app.app_context():
db.create_all() # 建表
app.run(port=5200, debug=True)

前端 templates/index.html：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<input id="content" placeholder="说点什么">
<button id="send">发布</button>
<ul id="list"></ul>

<script>
$(function () {
// 页面加载时：拉取所有留言并显示
$.get("/api/messages", function (list) {
list.forEach(function (m) {
$("#list").append($("<li></li>").text(m.content));
});
});

// 点击发布：提交留言，成功后追加到列表
$("#send").click(function () {
var content = $("#content").val().trim(); // 1. 读输入框
if (content === "") { alert("内容不能为空"); return; }

$.post("/api/messages", { content: content }, // 2. 发请求给后端
function (res) { // 3. 后端返回后
$("#list").append($("<li></li>").text(res.content)); // 4. 显示
$("#content").val("");
}, "json");
});
});
</script>

这个例子完整跑通了「前端 jQuery 发请求 → 后端 Flask 收数据存库 → 返回 JSON → 前端显示」。你前面的 jQuery 选择器、.val()、.append()、.click()、$.get()/$.post()，和后端的路由、request、jsonify、数据库 CRUD，全都在这里用上了。

3.3 学习路线

结语

本文把 jQuery 前端 和 Flask 后端 两半整合成一条完整链路：

• 前端必掌握：选择器、.val()/.text()、层级定位、.css()、.append()、$.ajax()/$.post()；
• 后端必掌握：Python 基础、HTTP 概念、Flask 路由、request/jsonify、数据库 CRUD、返回 JSON 接口；
• 打通的关键：前端 Ajax ↔ 后端路由，四步走通「发请求 → 收数据 → 存库 → 返 JSON」。

掌握这些，你就迈进了全栈开发的大门。