jQuery AJAX 方法

前面已学过 load、$.get、$.post 三个快捷方法。这一篇作为 AJAX 方法的完整手册，补充 getJSON/getScript、全能方法 $.ajax()、全局事件以及表单序列化工具。

快捷请求方法

方法	作用
load()	请求 HTML 并插入元素
$.get() / $.post()	GET / POST 请求
$.getJSON()	请求并自动解析 JSON
$.getScript()	加载并执行外部 JS

$.getJSON("data.json", function (json) {
  console.log(json.name); // 输出：data.json 中的 name 字段
});
$.getScript("extra.js", function () {
  console.log("脚本已加载并执行"); // 输出：脚本已加载并执行
});

$.ajax() 全能方法

$.ajax() 用一个配置对象控制请求的每个环节，其余方法都是它的简化版：

$.ajax({
  url: "user.php",          // 请求地址
  type: "POST",             // 请求方式，默认 GET
  data: { id: 10 },         // 发送的数据
  dataType: "json",         // 期望返回类型，会自动解析
  timeout: 3000,            // 3 秒超时
  success: function (res) {
    console.log(res.name);       // 请求成功：输出返回的 name
  },
  error: function (xhr) {
    console.log("失败：" + xhr.status); // 请求失败：输出状态码
  },
  complete: function () {
    console.log("请求结束");      // 无论成败都会执行
  }
});

全局 AJAX 事件

旧版 jQuery 提供 ajaxStart、ajaxStop、ajaxComplete、ajaxError、ajaxSuccess 等全局事件，可在任意元素上监听"所有请求"的动向。从 jQuery 3.0 起它们已不推荐使用，建议改用 $.ajax() 各自的回调，故这里只作了解。

表单序列化方法

提交前把表单内容自动拼成查询串或对象数组，省去手工取值：

var s = $("#form1").serialize();        // 结果形如 "user=张三&age=20"
var arr = $("#form1").serializeArray(); // [{name:"user",value:"张三"},...]
var q = $.param({ a: 1, b: 2 });        // 把对象转成 "a=1&b=2"
console.log(s, q);                      // 输出：序列化后的查询串
// 之后可配合 $.post($("#form1").attr("action"), s, fn) 一键提交

小结：日常用 $.get/$.post/$.getJSON 足够，遇到超时、请求头、错误细分等复杂需求就用 $.ajax()；serialize 系列则让表单提交变得一行搞定。