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 数据将在这里显示