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

零域码客2026-09-07 10:38

前言

做 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 核心语法：$(选择器). 方法 ()

部分 含义 例子
$ jQuery 入口，可理解为 jQuery 的简写 ---
$(选择器) 先选中元素，返回 jQuery 对象 $("#id")、$(".class")
.方法() 对选中的元素做操作 .text()、.css()、.append()

记住：先选中，再操作 。所有代码通常包在 $(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 前端方法速查表

知识点 作用 典型写法
$("#id") 按 id 选唯一元素 $("#title")
$(".class") 按 class 批量选 $(".item")
.val() 读 / 写表单值 $("#name").val()
.text() 读 / 写纯文本 $("#msg").text("完成")
.parent() 找父元素 $(this).parent()
.siblings() 找兄弟元素 $(this).siblings()
.children() 找子元素 $("#box").children()
.css() 读 / 改样式 $("#b").css("color","red")
.append() 末尾追加 $("#list").append("<li>x</li>")
$.ajax() / $.post() 异步请求后端 $.post(url, data, cb)

第二部分：后端篇 ------ 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 返回页面
对象 / 函数 作用
request.args.get() 拿 URL 查询参数 ?name=xx
request.form.get() 拿表单数据
request.get_json() 拿 JSON 数据（配 $.ajax）
jsonify() 返回 JSON
render_template() 返回 HTML 页面

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 后端知识点速查表

知识点 作用 关键代码
Python 基础 写逻辑的地基 变量 / 函数 / 字典
HTTP 前后端对话规则 GET/POST/ 状态码
路由 网址 → 函数 @app.route('/x')
请求 拿前端数据 request.form / request.get_json()
响应 返回结果 jsonify() / render_template()
数据库 存 / 查数据 SQLAlchemy CRUD
接口 返回 JSON jsonify(data)
模板 动态生成页面 {``{ 变量 }} {% for %}
会话 记住登录状态 session

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

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 学习路线

  1. ✅ 前端：jQuery 选择器、内容操作、事件、Ajax（你已学）
  2. ⬜ 后端基础 ：Flask 路由 + request/jsonify
  3. ⬜ 数据库：SQLAlchemy 增删改查（CRUD）
  4. ⬜ 联调：跑通「留言板」这个前后端完整流程
  5. ⬜ 进阶：Session 登录、蓝图模块化、RESTful、部署、安全

结语

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

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

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

相关推荐
এ慕ོ冬℘゜1 小时前
html理论
前端·html
BYSJMG1 小时前
计算机毕设选题做什么好？基于大数据的用户美食数据分析与可视化，PySpark预处理+ECharts大屏，含Isolation Forest异常检测算法
大数据·python·信息可视化·数据分析·spark·课程设计·美食
奈斯先生Vector1 小时前
AIGC 视频生成换个拍法：用 Kling Video 把一张人物图变成可剪辑的短故事
开发语言·人工智能·windows·python·aigc·音视频
IT_陈寒1 小时前
Java的HashMap竟然不是线程安全的，现在才知道！
前端·人工智能·后端
IT_陈寒1 小时前
React hooks闭包陷阱让我加了一宿班
前端·人工智能·后端
不一样的少年_1 小时前
设计稿里的图片明明很清晰，为什么到了手机上却糊了？一文讲透 DPR、压缩与格式选择
前端·后端·图片资源
卷无止境1 小时前
当"精简主义"住进AI编程助手：Ponytail深度解读
后端·python·fastapi
计算机魔术师1 小时前
OpenAI内部数据曝光：AI已经替人类写了3.1倍的研究代码
前端
2601_962298271 小时前
交易开拓者通常使用什么编程语言？这种语言如何帮助自动化交易？
java·c++·python·编程语言·自动化交易
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03历年考研数学一、数学二、数学三真题试卷及答案PDF04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接05ZCode 周末送额度活动开启：3 亿 Token 免费领取062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10VSCode+CodeX扩展，无法启动