前端技术Ajax入门

不秃的开发媛2025-04-26 8:35

1.1 AJAX 概念和 axios 使用

目标

  • 了解 AJAX 概念并掌握 axios 库基本使用

讲解

1. 什么是 AJAX？

  • 使用浏览器的 XMLHttpRequest 对象与服务器通信。
  • 在浏览器网页中，通过 AJAX 技术（XHR 对象）发起获取省份列表数据的请求，服务器返回准备好的省份列表数据给前端，前端将数据展示到网页。

2. 什么是服务器？

  • 可以暂时理解为提供数据的一台电脑。

3. 为何学习 AJAX？

  • 以前数据是固定的，无法随时变化。
  • 现在可以从服务器获取数据，让数据动态化。

4. 如何学习 AJAX？

  • 使用第三方库 axios，后续再学习 XMLHttpRequest 对象以了解 AJAX 底层原理。
  • axios 语法简单，让我们更关注与服务器通信，且在 Vue、React 中也使用 axios。

5. 需求：从服务器获取省份列表数据并展示到页面

  • 目标资源地址：http://hmajax.itheima.net/api/province

6. 讲解 axios 语法步骤

7. 引入 axios.js 文件
复制代码

html

|---|--------------------------------------------------------------------------------|
| | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |

8. axios 函数语法
复制代码

javascript

|---|-------------------------|
| | axios({ |
| | url: '目标资源地址' |
| | }).then((result) => { |
| | // 处理服务器返回的数据 |
| | }); |

9. 示例代码

复制代码

html

|---|--------------------------------------------------------------------------------|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>AJAX概念和axios使用</title> |
| | </head> |
| | <body> |
| | <p class="my-p"></p> |
| | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
| | <script> |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/province' |
| | }).then(result => { |
| | console.log(result.data.list); |
| | document.querySelector('.my-p').innerHTML = result.data.list.join('<br>'); |
| | }); |
| | </script> |
| | </body> |
| | </html> |

小结

  • AJAX 的作用：浏览器和服务器之间通信，实现动态数据交互。
  • 学习方法 ：先掌握 axios 库，再了解 XMLHttpRequest 原理。
  • axios 体验步骤 ：引入库文件，使用 axios 语法。

1.2 认识 URL

目标

  • 了解 URL 的组成和作用

讲解

1. 为什么要认识 URL？

  • 了解 URL 的结构，方便与服务器有效沟通。

2. 什么是 URL？

  • 统一资源定位符，简称网址，用于定位网络中的资源（如网页、图片、数据等）。

3. URL 的组成

  • 协议 ：如 http，规定浏览器和服务器传递数据的格式。
  • 域名：标记服务器在互联网中的位置。
  • 资源路径：标识服务器内的具体资源。

4. 示例需求

  • 访问新闻列表的 URL：http://hmajax.itheima.net/api/news

5. 示例代码

复制代码

javascript

|---|---------------------------------------------|
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/news' |
| | }).then(result => { |
| | console.log(result); |
| | }); |

小结

  • URL 是什么：统一资源定位符，用于访问服务器上的资源。
  • URL 组成：协议、域名、资源路径。

1.3 URL 查询参数

目标

  • 掌握通过 URL 传递查询参数，获取匹配的数据

讲解

1. 什么是查询参数？

  • 携带给服务器的额外信息，用于获取特定数据。

2. 查询参数语法

复制代码

|---|-------------------------------------------|
| | http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2 |

3. axios 携带查询参数

复制代码

javascript

|---|-----------------------|
| | axios({ |
| | url: '目标资源地址', |
| | params: { |
| | 参数名: 值 |
| | } |
| | }).then(result => { |
| | // 处理服务器返回的数据 |
| | }); |

4. 示例需求

  • 获取"河北省"下属的城市列表：
    • URL：http://hmajax.itheima.net/api/city
    • 参数名：pname

5. 示例代码

复制代码

javascript

|---|--------------------------------------------------------------------------|
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/city', |
| | params: { |
| | pname: '辽宁省' |
| | } |
| | }).then(result => { |
| | console.log(result.data.list); |
| | document.querySelector('p').innerHTML = result.data.list.join('<br>'); |
| | }); |

小结

  • 查询参数作用：提供额外信息，获取对应数据。
  • axios 使用方法 ：通过 params 选项携带参数。

1.4 案例：查询地区列表

目标

  • 巩固查询参数的使用，查看多对查询参数如何传递

讲解

1. 需求

  • 根据输入的省份和城市名字，查询下属地区列表。
  • URL：http://hmajax.itheima.net/api/area
  • 参数名：
    • pname：省份名字
    • cname：城市名字

2. 示例代码

复制代码

javascript

|---|------------------------------------------------------------------------|
| | document.querySelector('.sel-btn').addEventListener('click', () => { |
| | let pname = document.querySelector('.province').value; |
| | let cname = document.querySelector('.city').value; |
| | |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/area', |
| | params: { |
| | pname, |
| | cname |
| | } |
| | }).then(result => { |
| | let list = result.data.list; |
| | let theLi = list.map(areaName => `<li>${areaName}</li>`).join(''); |
| | document.querySelector('.list-group').innerHTML = theLi; |
| | }); |
| | }); |

小结

  • ES6 对象简写：属性名和值同名时可简写。

1.5 常用请求方法和数据提交

目标

  • 掌握如何向服务器提交数据

讲解

1. 请求方法

  • 常用方法：GET、POST、PUT、DELETE、PATCH。
  • GET：获取数据（默认）。
  • POST：提交数据。

2. 何时提交数据？

  • 如订单数据、登录信息等需要保存到服务器。

3. axios 提交数据

复制代码

javascript

|---|-----------------------|
| | axios({ |
| | url: '目标资源地址', |
| | method: 'POST', |
| | data: { |
| | 参数名: 值 |
| | } |
| | }).then(result => { |
| | // 处理服务器返回的数据 |
| | }); |

4. 示例需求

  • 注册账号，提交用户名和密码：
    • URL：http://hmajax.itheima.net/api/register
    • 请求方法：POST
    • 参数名：
      • username：用户名
      • password：密码

5. 示例代码

复制代码

javascript

|---|--------------------------------------------------------------------|
| | document.querySelector('.btn').addEventListener('click', () => { |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/register', |
| | method: 'POST', |
| | data: { |
| | username: 'itheima007', |
| | password: '7654321' |
| | } |
| | }); |
| | }); |

小结

  • 常用请求方法 ：POST（提交数据）、GET（查询数据）。
  • axios 核心配置项 ：url、method、params、data。

1.6 axios 错误处理

目标

  • 掌握接收 axios 响应错误信息的处理语法

讲解

1. 错误处理

  • 使用 catch 方法捕获请求响应错误：
复制代码

javascript

|---|-----------------------|
| | axios({ |
| | // ...请求选项 |
| | }).then(result => { |
| | // 处理成功数据 |
| | }).catch(error => { |
| | // 处理失败错误 |
| | }); |

2. 示例代码

复制代码

javascript

|---|--------------------------------------------------------------------|
| | document.querySelector('.btn').addEventListener('click', () => { |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/register', |
| | method: 'post', |
| | data: { |
| | username: 'itheima007', |
| | password: '7654321' |
| | } |
| | }).then(result => { |
| | console.log(result); |
| | }).catch(error => { |
| | console.log(error.response.data.message); |
| | alert(error.response.data.message); |
| | }); |
| | }); |

小结

  • 错误处理 ：通过 .catch 方法捕获错误信息。

1.7 HTTP 协议-请求报文

目标

  • 了解 HTTP 协议中请求报文的组成和作用

讲解

1. 请求报文组成

  • 请求行：请求方法、URL、协议。
  • 请求头 ：附加信息（如 Content-Type）。
  • 空行：分割请求头和请求体。
  • 请求体：发送的资源。

小结

  • 请求报文组成：请求行、请求头、空行、请求体。

1.8 请求报文-错误排查

目标

  • 了解查看请求报文的作用，辅助错误排查

讲解

  • 通过查看请求报文确认发送的数据是否正确。

小结

  • 作用：快速确认发送内容是否正确。

1.9 HTTP 协议-响应报文

目标

  • 了解响应报文的组成

讲解

1. 响应报文组成

  • 响应行：协议、状态码、状态信息。
  • 响应头 ：附加信息（如 Content-Type）。
  • 空行：分割响应头和响应体。
  • 响应体：返回的资源。

2. HTTP 响应状态码

  • 如 404 表示资源不存在。

小结

  • 响应报文组成：响应行、响应头、空行、响应体。
  • 状态码作用：表明请求是否成功完成。

1.10 接口文档

目标

  • 掌握接口文档的使用，配合 axios 与服务器进行数据交互

讲解

1. 接口文档

  • 描述接口的文章（由后端提供）。
  • 包含请求的 URL、方法、参数等信息。

2. 示例需求

  • 查看登录接口文档，编写登录代码。

3. 示例代码

复制代码

javascript

|---|--------------------------------------------------------------------|
| | document.querySelector('.btn').addEventListener('click', () => { |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/login', |
| | method: 'post', |
| | data: { |
| | username: 'itheima007', |
| | password: '7654321' |
| | } |
| | }); |
| | }); |

小结

  • 接口文档：描述接口的文章。
  • 包含内容：URL、请求方法、参数。

1.11 案例：用户登录-主要业务

目标

  • 尝试通过页面获取用户名和密码，进行登录

讲解

1. 实现步骤

  1. 点击登录，获取并判断用户名和密码长度。
  2. 提交数据与服务器通信。

2. 示例代码

复制代码

javascript

|---|--------------------------------------------------------------------------|
| | document.querySelector('.btn-login').addEventListener('click', () => { |
| | const username = document.querySelector('.username').value; |
| | const password = document.querySelector('.password').value; |
| | |
| | if (username.length < 8) { |
| | console.log('用户名必须大于等于8位'); |
| | return; |
| | } |
| | if (password.length < 6) { |
| | console.log('密码必须大于等于6位'); |
| | return; |
| | } |
| | |
| | axios({ |
| | url: 'http://hmajax.itheima.net/api/login', |
| | method: 'POST', |
| | data: { |
| | username, |
| | password |
| | } |
| | }).then(result => { |
| | console.log(result.data.message); |
| | }).catch(error => { |
| | console.log(error.response.data.message); |
| | }); |
| | }); |

小结

  • 实现思路：绑定点击事件、获取输入值、判断长度、提交数据。

1.12 案例：用户登录-提示信息

目标

  • 根据提示标签和样式，给用户反馈提示

讲解

1. 封装提示框函数

复制代码

javascript

|---|-----------------------------------------------------------------|
| | function alertFn(msg, isSuccess) { |
| | myAlert.classList.add('show'); |
| | myAlert.innerText = msg; |
| | const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'; |
| | myAlert.classList.add(bgStyle); |
| | |
| | setTimeout(() => { |
| | myAlert.classList.remove('show'); |
| | myAlert.classList.remove(bgStyle); |
| | }, 2000); |
| | } |

小结

  • 封装函数：遇到重复逻辑时封装为函数。
  • 提示框控制：通过添加或移除类名控制显示/隐藏。

1.13 form-serialize 插件

目标

  • 使用 form-serialize 插件快速收集表单元素的值

讲解

1. 插件使用

  • 引入插件文件。
  • 使用 serialize 函数：
复制代码

javascript

|---|--------------------------------------------------------------|
| | const form = document.querySelector('.example-form'); |
| | const data = serialize(form, { hash: true, empty: true }); |
| | console.log(data); |

小结

  • 使用场景：快速收集表单元素的值。
  • 配置选项 ：hash（对象/查询字符串）、empty（是否收集空值）。

1.14 案例：用户登录-form-serialize

目标

  • 使用 form-serialize 插件重新修改用户登录案例

讲解

1. 修改代码

复制代码

javascript

|---|--------------------------------------------------------------|
| | // 引入插件 |
| | <script src="./lib/form-serialize.js"></script> |
| | |
| | // 使用 serialize 函数 |
| | const form = document.querySelector('.login-form'); |
| | const data = serialize(form, { hash: true, empty: true }); |
| | const { username, password } = data; |

相关推荐
我真的不会C5 分钟前
QT窗口相关控件及其属性
开发语言·qt
CodeCraft Studio5 分钟前
Excel处理控件Aspose.Cells教程：使用 Python 在 Excel 中进行数据验
开发语言·python·excel
장숙혜8 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
.生产的驴10 分钟前
SpringBoot 封装统一API返回格式对象 标准化开发 请求封装 统一格式处理
java·数据库·spring boot·后端·spring·eclipse·maven
火柴盒zhang11 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端14 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_17 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia17 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
猿周LV17 分钟前
JMeter 安装及使用 [软件测试工具]
java·测试工具·jmeter·单元测试·压力测试
景天科技苑18 分钟前
【Rust】Rust中的枚举与模式匹配，原理解析与应用实战
开发语言·后端·rust·match·enum·枚举与模式匹配·rust枚举与模式匹配
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10【2025年最新】OpenWrt 更换国内源的指南（图形界面版)