EP067. “第一次调用 REST API：$.getJSON() 试水”
🔒 登录后可标记已读📌 并入的公告（EP066. Quick Note About The Next Lesson）：下一讲演示时地址栏会出现 localhost:3000（讲师本地用的预览代理服务器），这是他本地环境的特殊情况，跟着做的话继续用自己一直在用的本地域名（例如 fictional-university.local）就好，不用刻意去配 3000 端口。同样地，讲师在 JS 代码里写的 URL 也可以直接从根路径的斜杠开始（例如 $.getJSON("/wp-json/wp/v2/posts?search=…")），不需要写死协议和域名。如果代码跑不起来，官方建议下载对应讲座的 zip 资源包，跟自己的代码逐行对比。
真正开始学习 WordPress REST API 的第一步。先用浏览器直接访问 /wp-json/wp/v2/posts 和 /wp-json/wp/v2/pages 看 WordPress 原生返回的 JSON 数据长什么样（一个「对象数组」，每个对象是一篇文章/页面），再介绍 ?search=关键词 这个查询参数可以用来做搜索过滤。最后在 search.js 里第一次用 jQuery 的 $.getJSON() 方法真正发一个请求出去，先用最简单的 alert() 弹窗把拿到的第一条结果标题弹出来，验证「JS 真的从服务器把数据抓回来了」这件事能跑通，还没有开始生成正式的 HTML。
涉及文件
wp-content/themes/fictional-university-theme/src/modules/Search.js（修改，getResults()方法从 EP065 遗留的占位逻辑改成真正发 REST API 请求）
代码实现
getResults() 原本只是把 resultsDiv 的内容改成占位文字（「imagine real search results here」之类）并处理 isSpinnerVisible。这一讲把这些占位代码整段删掉，换成真正的 REST API 调用：
// wp-content/themes/fictional-university-theme/src/modules/Search.js
// 修改：getResults() 从占位逻辑换成真正的 $.getJSON() 请求
getResults() {
$.getJSON("/wp-json/wp/v2/posts?search=" + this.searchField.val(), function (posts) {
alert(posts[0].title.rendered)
})
}要点：
$.getJSON(url, callback)接两个参数：请求的网址，以及服务器响应后要执行的回调函数。- 网址末尾拼接
"search=" + this.searchField.val()，让请求跟着搜索框当前输入的内容走，而不是写死某个关键词。 - 回调函数的参数名（这里叫
posts）可以随便取，它装的就是 WordPress 返回的 JSON 数组。 - 这一讲回调用的是普通
function，不是箭头函数——因为这个函数体里完全没有用到this，所以先不用管this指向问题（下一讲 EP068 生成真实 HTML 时才会遇到，那时才需要改成箭头函数）。 posts[0].title.rendered：因为返回的是数组（哪怕只有一条结果也是数组），要先取第0项，再往里挖title.rendered（title本身也是一个对象，真正的标题字符串在它的rendered属性里）。
Hook / Function 速查
| 名称 | 类型 | 用途 |
|---|---|---|
/wp-json/wp/v2/posts、/wp-json/wp/v2/pages | WordPress REST API 内建端点 | 分别返回「文章」「页面」的 JSON 数据，默认给最新 10 条 |
?search=关键词 | REST API 查询参数 | 让端点只返回标题/内容匹配关键词的结果 |
?per_page=、/posts/ID | REST API 查询参数/路径 | transcript 里演示过用来限制条数、按 ID 精确取一条，本讲代码没有实际用到 |
$.getJSON(url, callback) | jQuery 方法 | 发送 GET 请求到指定 URL，并把返回的 JSON 数据解析后传给回调函数 |
| Postman | 第三方桌面工具（非代码） | 讲师演示用来把压缩成一坨的 JSON 数据格式化显示，方便肉眼看清楚每个属性叫什么，纯粹是可选的调试辅助工具 |
常见坑
这一讲主要是概念铺垫（REST API 是什么、JSON 结构长什么样），transcript 没有提到具体的报错或踩坑。真正容易踩坑的地方（this 指向、模板字符串里编辑器自动补花括号等）会在接下来 EP068、EP069 遇到。
延伸 / 后续讲座会用到
下一讲 EP068 会把这里的 alert() 测试换成用模板字符串真正生成搜索结果 HTML；再往后 EP071/072 会学习同时搜索多种文章类型。
Sources
Udemy：
- Become a WordPress Developer: Unlocking Power With Code — Section 14, EP066, EP067