← 返回目录

14. $.ajax 接口请求与 jQuery 动画

原生 XMLHttpRequest 写起来又臭又长——要 new、open、监听、send、parse 一整套。jQuery 的 $.ajax 把这些全封装了：自动帮你解析 JSON、自动拼 GET 参数、自带 beforeSend（请求前）和 complete（请求后）两个钩子，简直就是低配版拦截器。

另外 jQuery 还自带一堆动画方法——fadeIn（淡入）、slideUp（上滑）、animate（自定义动画）——不用自己写 CSS transition，一行代码出动画。

14.1 互动演示（模拟 $.ajax 请求 + 动画）

14.2 知识点讲解

① $.ajax 完整模板（记住四个回调）

$.ajax 接收一个配置对象，里面填接口地址、方式、参数，再写四个回调函数——分别对应请求前、成功、失败、请求后：

$.ajax({
	url: "http://xxx/api/user",   // 接口地址
	type: "GET",          // 请求方式 GET/POST
	data: { page: 1, size: 10 },  // 请求参数（自动帮你拼好）
	dataType: "json",        // ★ 自动把返回字符串转成 JS 对象！
	                //  不用你自己 JSON.parse 了！
	headers: {},          // 自定义请求头

	// 请求前回调（相当于请求拦截器）
	beforeSend: function (xhr) {
		// 比如：统一带 token
		xhr.setRequestHeader("token", localStorage.getItem("token"));
	},

	// 成功回调
	success: function (res) {
		console.log("接口数据", res); // res 已经是 JS 对象了！
	},

	// 失败回调（404/500/网络错误）
	error: function (err) {
		console.log("请求失败", err);
	},

	// 请求结束回调（无论成功失败都会执行）
	complete: function() {
		// 比如：关闭 loading 动画
	}
});
	

dataType: "json" 让 jQuery 自动帮你把返回的 JSON 字符串 parse 成 JS 对象——因为 你直接在 success 里用就好了，不用再自己 parse。

② 简写：$.get 和 $.post

不想写一长串配置？jQuery 给了两个简写，够简单：

// GET 简写：$.get(url, 参数, 成功回调)
$.get("http://xxx/api/user", { page: 1 }, function (res) {
  console.log(res);
});

// POST 简写：$.post(url, 参数, 成功回调)
$.post("http://xxx/api/login", { username: "zhangsan", password: "123" }, function (res) {
  console.log(res);
});

复杂逻辑还是用 $.ajax（能写 beforeSend、complete）；简单请求用 $.get / $.post 够了。

③ jQuery 动画：一行一个效果

// 显示隐藏
$(".box").show(300); // 显示，300 毫秒动画
$(".box").hide(300); // 隐藏
$(".box").toggle(300); // 切换（显示变隐藏，隐藏变显示）

// 滑入滑出
$(".box").slideDown(); // 往下滑展开
$(".box").slideUp(); // 往上滑收起
$(".box").slideToggle(); // 切换

// 淡入淡出
$(".box").fadeIn(); // 淡入（从透明到不透明）
$(".box").fadeOut(); // 淡出（从不透明到透明）
$(".box").fadeToggle(); // 切换

// 自定义动画 animate：改任意 CSS 属性
$(".box").animate({ width: "300px", top: "50px" }, 500);

// stop：停止当前正在执行的动画
// （连续触发动画前先 stop，不然动画排队叠着卡）
$(".box").stop();

如果你快速反复点动画按钮，动画会一个接一个排队执行，看着很卡——因为 jQuery 默认把动画排队。每次开新动画前先 .stop 停掉当前动画，就流畅了。

④ 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

① 老项目里发请求——用 $.ajax 比原生 XHR 简洁很多；② 页面切换、弹窗、下拉菜单的展开收起——用 slideToggle / fadeToggle；③ 按钮 hover 动效。

常见的问题：

① 忘了写 dataType: "json"，结果拿到的是字符串，没法 .name；② 连续触发动画不 stop，排队卡顿；③ 把 success 和 complete 搞混——complete 无论成败都执行，success 只成功才执行；④ 跨域 $.ajax 也解决不了。

解决思路：

① 永远写 dataType: "json"；② 连续动画前先 .stop；③ beforeSend = 请求前、success = 成功、error = 失败、complete = 都执行。

14.3 课后作业（融入本节）