简化方法与 load 速查

6.3 简化方法与 load 速查

上一节的 $.ajax 是可调全参数的专业台钳，但多数日常请求用不着那么多配置——取一段 JSON、提交一份表单、把一段 HTML 装进容器，各有一件预包装工具。本节盘点四件简化方法与性质特殊的 load，讲清每件的适用清单与局限；判断的标准始终是上一节的原理：简化方法的参数越少，越要在简单的场景用。

本节摘要：$.get 与 $.post 是指定请求方式的极简封装；$.getJSON 预设 JSON 解析还支持跨接口地址；$.getScript 取回并立即执行脚本；.load 是唯一挂在集合上的方法，取回 HTML 直接填入容器，还带"只取页面某片段"的过滤语法。需要超时、自定义头或全局事件豁免时，回到 $.ajax。

四件工具，各自接什么活

// 取 JSON：等价于 $.ajax 的 GET 加 dataType json
$.getJSON('api/queue', { ward: 'a' }, function (data) {
  renderQueue(data);
});

// 提交数据：表单序列化配合是一对经典搭档
$.post('api/register', $('#register').serialize(), function (res) {
  showToast(res.message);
});

// 取脚本并执行：小型插件按需加载的老办法
$.getScript('js/extra-chart.js', function () {
  console.log('图表库已就绪');
});

// 最简 GET：dataType 靠响应头嗅探
$.get('api/status', function (res) {
  console.log(res);
});
​

serialize 值得专门停一步：它把容器内所有带 name 的控件打包成查询串形态（guest=张三&bed=b），是表单提交场景的标配搭档——没有它，你就得逐个控件 val() 再手拼对象。四件工具的回调都只有成功分支，失败没有回：它们的第三参不是 error 的位置，这一点与 $.ajax 差异最大。要统一的失败处理，要么全局 ajaxError 兜底（上一节的总控台），要么干脆用 $.ajax。

load：取回即填入的一体机

.load 在全家里的位置很特殊——它是唯一挂在 jQuery 集合上的方法（其余四个挂在 $ 上），取回响应后直接当作 HTML 填进选中元素，取数与渲染一步到位：

// 取整页填入
$('#ward-panel').load('fragments/ward.html');

// 带数据与收尾回调
$('#ward-panel').load('fragments/ward.html', { ward: 'a' }, function () {
  console.log('面板已就位');
});
​

它还有一手独门绝技：地址后面跟空格加选择器，只取回响应当中匹配的片段：

// 服务端返回整页，只把 id 为 queue 的那块填进来
$('#ward-panel').load('fragments/ward.html #queue');
​

这行在维护"多页老站改局部刷新"时是利器：服务端一行不改，前端把别人整页返回里的目标区块抠出来装进自家容器。代价也要说清：片段过滤意味着响应体整体下载，带宽上并不省；且填入的是 HTML 字符串，若来源不可信，注入风险直接进门——安全底线在 6.4 节统一交代。

完整案例：局部刷新的选型推演

背景：分诊台需要定时刷新候诊队列。三条技术路线各走一遍，体会选型逻辑。

路线甲，load 一行流：

setInterval(function () {
  $('#queue').load('fragments/queue.html #queue .item');
}, 15000);
​

结果：十五秒刷一次，队列整体替换。解读：代码量最小，但整块替换会闪、旧条目上挂的数据账与事件态全部重置，且失败完全静默。适合内容低价值、丢失无所谓的展示位。

路线乙，getJSON 加手工渲染：

setInterval(function () {
  $.getJSON('api/queue', function (list) {
    var html = list.map(function (p) {
      return '<li class="item ' + p.state + '">' + p.name + '</li>';
    }).join('');
    $('#queue').html(html);
  });
}, 15000);
​

结果：数据形态可控、渲染逻辑可测，但失败仍无回、高频替换依旧。适合列表结构稳定的场景。

路线丙，$.ajax 全配置加增量更新：

setInterval(function () {
  $.ajax({
    url: 'api/queue/changes',
    dataType: 'json',
    timeout: 5000,
    success: function (changes) {
      changes.added.forEach(function (p) { addPatientRow(p); });
      changes.removed.forEach(function (id) { $('#' + id).detach(); });
    },
    error: function (xhr, status) {
      if (status === 'timeout') { console.warn('本轮超时，下轮再试'); }
    }
  });
}, 15000);
​

结果：只动变化的条目，不闪不重置，失败有分流。解读：三条路线没有高下，只有匹配——渲染越精细、错误越要管，就越靠近 $.ajax。这条推演也是全章的选型总纲。

原生对照：简化工具的现代等价

四件工具在 fetch 世界都能三五行还原：get 与 getJSON 对应 fetch(url).then(r => r.json())；post 补上 method 与 body；getScript 对应取文后动态执行（现代里更多用模块按需引入）；load 则是 fetch 加 innerHTML 的两行组合。现代项目里这套简化方法的替代成本极低，它们的真实价值在存量代码的阅读——见到 $.post(url, data, fn) 能立刻在脑内展开成完整的 $.ajax，就算学会这一节了。

要点复盘

• 简化四件套按活选：取 JSON 用 getJSON、提交表单用 post 配 serialize、按需载脚本用 getScript。
• 简化方法没有失败分支，统一错误处理靠全局 ajaxError 或改回 $.ajax。
• load 取回即填入，片段语法"地址 空格 选择器"能只装目标区块，但带宽不省、注入风险要防。
• 选型总纲：渲染越精细、错误越要管，越靠近 $.ajax；一行流留给低价值展示位。
• 现代等价物是 fetch 的两三行，这套工具的主战场在存量代码阅读。

快捷工具盘完，体外通道还剩最后一道体壁：跨域。下一节凿开它，并交代安全底线。