1. Ajax 核心知识卡片
无刷新更新
Ajax 可以在不重新加载整个页面的情况下,向服务器请求数据并更新页面局部内容。
异步流程
请求发出后页面不会卡住,数据返回时再通过回调、Promise 或 async/await 处理结果。
JSON 数据
前后端常用 JSON 格式传递数据,前端将 JSON 解析后渲染成列表、卡片或图表。
异常处理
真实请求需要处理加载中、成功、失败、空数据等状态,提升用户体验。
2. Ajax 请求生命周期
触发事件
点击按钮或输入搜索词
发送请求
fetch(url) 发起 HTTP 请求
等待响应
显示 Loading 状态
解析 JSON
response.json()
渲染页面
DOM 动态生成内容
3. 本地 JSON 学习资源中心
这个模块通过 Ajax 读取项目中的 data/resources.json 文件,并支持前端搜索和分类筛选。
等待加载本地 JSON 数据
4. 随机用户生成器
点击按钮,从开源接口 Random User API 实时获取真实格式的用户数据。
数据尚未加载,请点击上方按钮
5. 远程文章 API 与原始 JSON 预览
这个模块请求 JSONPlaceholder 的文章数据,并同时展示“卡片渲染结果”和“原始 JSON 数据”,便于理解 Ajax 数据从接口到页面的转换过程。
文章列表
点击按钮后将加载 5 条远程文章数据。
// 原始 JSON 数据将在这里显示