Python Space

Appearance

jQuery与前后端交互 ​

jQuery 曾经是前端开发中非常核心的库。虽然现在很多新项目不会再把它作为主角，但它依然非常适合帮助初学者理解这些关键问题：

  • 如何更方便地操作页面
  • 如何更方便地绑定事件
  • 如何向后端发送请求
  • 前后端到底是怎样交换数据的

所以这一节的价值，不只是学一个旧库，而是借助 jQuery 更容易看清网页交互的基本套路。

本节目标 ​

  • 理解 jQuery 是什么
  • 学会使用 jQuery 选择元素
  • 学会使用 jQuery 绑定事件
  • 学会修改页面内容和样式
  • 理解 jQuery 对象和原生 DOM 对象的区别
  • 理解 Ajax 的基本工作方式
  • 学会用 jQuery 发送最基础的 GET 和 POST 请求

什么是 jQuery ​

jQuery 本质上是一个 JavaScript 库。

它出现的原因很现实：早期原生 JavaScript 操作 DOM、处理事件、发 Ajax 请求时，写法比较繁琐，而且不同浏览器之间还可能有兼容问题。jQuery 就是在这种背景下流行起来的。

它的核心优势是：

  • 写法更短
  • 操作页面更方便
  • Ajax 更容易上手

你可以把它先理解成：“帮你简化前端常见操作的一层工具封装”。

为什么现在还要学它 ​

主要有三个原因：

1. 很多老项目还在用 ​

尤其是传统管理后台、旧版网站、部分 Django 项目，你仍然会看到它。

2. 它有助于理解 DOM 操作 ​

你前面学过原生 JavaScript 获取元素、绑定事件。jQuery 可以让这些操作更简洁，帮助你形成更清楚的思路。

3. 它有助于理解前后端交互 ​

Ajax 是前端和后端交换数据的经典方式，而 jQuery 对 Ajax 做了非常适合初学者入门的封装。

引入 jQuery ​

如果你要在页面里使用 jQuery，前提是先引入它。

例如：

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

引入完成后，你就可以使用 $() 这种写法了。

jQuery 选择元素 ​

这是 jQuery 最常见的入口。

通过 id 选择 ​

javascript
$("#box")

表示选择：

html
id="box"

的元素。

通过 class 选择 ​

javascript
$(".item")

表示选择所有带有：

html
class="item"

的元素。

通过标签选择 ​

javascript
$("p")

表示选择所有 p 标签。

jQuery 对象和原生 DOM 对象的区别 ​

这是初学者最容易混乱的点之一。

原生 DOM 对象 ​

例如：

javascript
const box = document.getElementById("box");

这是浏览器原生的 DOM 对象。

jQuery 对象 ​

例如：

javascript
const box = $("#box");

这是 jQuery 封装后的对象。

它们看起来都像“页面元素”，但能调用的方法不一样。

例如：

javascript
$("#box").hide();

这是 jQuery 写法。

但原生 DOM 对象不能直接这样写。

所以你要记住：

  • 原生 DOM 对象和 jQuery 对象不是完全一样的东西
  • 不能想当然混着调用方法

修改页面内容 ​

修改文本 ​

javascript
$("#title").text("新的标题");

修改 HTML ​

javascript
$("#box").html("<strong>加粗内容</strong>");

修改输入框的值 ​

javascript
$("#username").val("小明");

获取输入框的值 ​

javascript
const value = $("#username").val();
console.log(value);

修改样式 ​

javascript
$("#box").css("color", "red");
$("#box").css("font-size", "20px");

也可以一次设置多个样式：

javascript
$("#box").css({
  color: "white",
  background: "blue",
  padding: "10px"
});

绑定事件 ​

点击事件 ​

javascript
$("#btn").click(function () {
  alert("点击了按钮");
});

更通用的写法 ​

javascript
$("#btn").on("click", function () {
  console.log("按钮被点击了");
});

on() 更灵活，也更接近正式项目中的常见写法。

显示、隐藏和简单效果 ​

jQuery 提供了很多对初学者很友好的方法。

显示 ​

javascript
$("#box").show();

隐藏 ​

javascript
$("#box").hide();

淡入 ​

javascript
$("#box").fadeIn();

淡出 ​

javascript
$("#box").fadeOut();

这些方法在老项目里非常常见。

操作页面节点 ​

添加内容 ​

javascript
$("#list").append("<li>新的列表项</li>");

删除元素 ​

javascript
$("#box").remove();

清空内容 ​

javascript
$("#box").empty();

一个完整小案例：点击按钮新增一条学习记录 ​

HTML：

html
<input id="courseInput" type="text" placeholder="请输入学习内容">
<button id="addBtn">添加</button>
<ul id="courseList"></ul>

JavaScript：

javascript
$("#addBtn").click(function () {
  const value = $("#courseInput").val();

  if (value === "") {
    alert("请输入学习内容");
    return;
  }

  $("#courseList").append("<li>" + value + "</li>");
  $("#courseInput").val("");
});

效果是：

  • 输入学习内容
  • 点击按钮
  • 页面列表新增一项
  • 输入框清空

这个例子已经把：

  • 获取值
  • 条件判断
  • 事件绑定
  • DOM 插入

串在一起了。

什么叫前后端交互 ​

这是你必须真正理解的概念。

前端 ​

前端负责：

  • 显示页面
  • 接收用户操作
  • 向后端发请求

后端 ​

后端负责：

  • 处理业务逻辑
  • 访问数据库
  • 返回结果

交互过程 ​

例如用户点击“登录”按钮时，通常会发生：

  1. 前端收集用户名和密码
  2. 前端把数据发送给后端
  3. 后端校验账号密码
  4. 后端返回成功或失败结果
  5. 前端再把结果展示给用户

这就是前后端交互的基本流程。

什么是 Ajax ​

Ajax 的核心意义很简单：

不刷新整个页面，也能和后端交换数据。

例如：

  • 登录提交
  • 搜索建议
  • 点赞
  • 评论提交
  • 加载更多内容

这些操作很多都不需要整页刷新，这时就会用到 Ajax。

最基础的 Ajax GET 请求 ​

javascript
$.ajax({
  url: "/api/user",
  type: "GET",
  success: function (res) {
    console.log("请求成功");
    console.log(res);
  },
  error: function () {
    console.log("请求失败");
  }
});

这段代码的意思是：

  • 向 /api/user 发起 GET 请求
  • 请求成功时执行 success
  • 请求失败时执行 error

POST 请求示例 ​

javascript
$.ajax({
  url: "/api/login",
  type: "POST",
  data: {
    username: "xiaoming",
    password: "123456"
  },
  success: function (res) {
    console.log(res);
  }
});

这通常用于：

  • 登录
  • 注册
  • 提交表单
  • 保存数据

一个更贴近真实场景的表单提交例子 ​

HTML：

html
<input id="username" type="text" placeholder="请输入用户名">
<input id="password" type="password" placeholder="请输入密码">
<button id="loginBtn">登录</button>

JavaScript：

javascript
$("#loginBtn").click(function () {
  const username = $("#username").val();
  const password = $("#password").val();

  if (username === "" || password === "") {
    alert("用户名和密码不能为空");
    return;
  }

  $.ajax({
    url: "/api/login",
    type: "POST",
    data: {
      username: username,
      password: password
    },
    success: function (res) {
      console.log("登录成功", res);
    },
    error: function () {
      console.log("登录失败");
    }
  });
});

这里你要能看懂整个流程：

  1. 点击按钮
  2. 读取输入框内容
  3. 先做前端校验
  4. 再发 Ajax 请求
  5. 根据结果决定后续处理

这已经和 Django 表单提交的思路很接近了。

jQuery 简写请求方法 ​

jQuery 还提供了更短的写法。

GET ​

javascript
$.get("/api/user", function (res) {
  console.log(res);
});

POST ​

javascript
$.post("/api/login", {
  username: "xiaoming",
  password: "123456"
}, function (res) {
  console.log(res);
});

对初学者来说，这种写法更容易上手。

常见错误 ​

1. 忘记先引入 jQuery ​

如果页面里没有先加载 jQuery，就直接写：

javascript
$("#box")

会报错。

2. jQuery 对象和原生 DOM 对象混用 ​

例如：

javascript
const box = document.getElementById("box");
box.hide();

这是错的，因为 hide() 是 jQuery 方法，不是原生 DOM 方法。

3. 请求地址写错 ​

如果 Ajax 的 url 写错，请求就不会成功。

4. 以为 Ajax 发出去了，页面就一定会自动变化 ​

Ajax 只是请求后端；页面要不要变化，还得你自己在 success 回调里写逻辑。

练习题 ​

练习 1 ​

写一个按钮，点击后把某个段落隐藏，再点击另一个按钮把它显示出来。

练习 2 ​

写一个输入框和按钮，点击按钮后把输入内容追加到列表中。

练习 3 ​

用 jQuery 改变一个标题的颜色和文字内容。

练习 4 ​

模拟一个登录提交流程，先做前端非空校验，再发 Ajax 请求。

练习 5 ​

分别用 $.ajax() 和 $.get() 写一个获取数据的示例，比较两者写法差异。

本节小结 ​

jQuery 本身不是你后面唯一要依赖的技术，但它是一个非常好的过渡工具，能帮助你快速看懂：

  • 如何选中元素
  • 如何改页面
  • 如何响应事件
  • 如何向后端发请求

你真正要掌握的，不只是 jQuery 语法本身，而是它背后那套前后端交互思路。只要这套思路建立起来，后面你学 Django 表单、接口请求和动态页面处理时，会更顺手。

Built with VitePress.

Copyright © 2026