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

$.ajax 是 jQuery 封装的 AJAX，比原生 XHR 简单十倍。

核心五步：
1. url——接口地址
2. type——GET/POST
3. data——传参
4. success——成功回调
5. error——失败回调

坑：dataType: "json" 自动转 JSON、POST 文件要 processData:false + contentType:false、async 默认 true。

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

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

14.2 知识点讲解

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

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

$.ajax({
  // 接口地址
  url: "http:                   // xxx/api/user",
  // 请求方式 GET/POST
  type: "GET",
  // 请求参数（自动帮你拼好）
  data: { page: 1, size: 10 },
  // ★ 自动把返回字符串转成 JS 对象！
  dataType: "json",
  // 不用你自己 JSON.parse 了！
  // 自定义请求头
  headers: {},
  // 请求前回调（相当于请求拦截器）
  // 比如：统一带 token
  beforeSend: function (xhr) {
    xhr.setRequestHeader("token", localStorage.getItem("token"));
  },

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

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

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

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

2. 简写：$.get 和 $.post

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

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

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

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

3. jQuery 动画：一行一个效果

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

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

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

// 自定义动画 animate：改任意 CSS 属性
// stop：停止当前正在执行的动画
$(".box").animate({ width: "300px", top: "50px" }, 500);
// （连续触发动画前先 stop，不然动画排队叠着卡）
$(".box").stop();

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

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

可能在什么地方用：

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

常见的问题：

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

解决思路：

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

14.3 课后作业（融入本节）

本页重点