当前位置：首页 > article >正文

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

article 2026/5/3 18:07:59

文章目录

前言
一、Ajax技术（从服务端获取数据，发送各种请求）
- 0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试
- 1 基本概念
- 2 原生Ajax使用示例（几年前的早期用法）
二、 Axios技术(对原生的Ajax进行了封装)
- 1 基本概念
- - （1）Axios是什么
  - （2）常见的请求方式有哪些？
- 2 快速入门
- - 示例1：入门案例
  - 示例2：入门案例+绑定事件
- 3 Axios通用请求格式语法
- - 示例1：params传递参数发送get请求
  - 示例2：data传递参数发送post请求
  - 综合案例：地区查询
- 4 axios 错误处理

前言

本课程所有接口采用apifox模拟，全部使用的是
B站-AJAX和黑马头条-数据管理平台
这个里面的接口进行测试

一、Ajax技术（从服务端获取数据，发送各种请求）

参考视频
官方文档

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

参考视频

接口文档管理：
- 在线
  - apipost
  - apifox
  - postman等等
- 离线
  - word
  - md

在线的apipost这些测试工具功能很多，具体的后面不断深入学习慢慢了解这个测试工具，这个测试工具必须会用，后面无论是前端还是后端都需要频繁使用这个工具来进行测试。

下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。

1 基本概念

学习本节前建议先去学习什么是GET、POST请求这些

概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
Ajax技术是一个异步交互技术，通过这个Ajax技术我们就可以从服务端获取数据
作用:
- 数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可
  用的校验等等。
同步与异步请求区别
- 举一个例子就好理解了
  我们在点击某些页面的时候，如果网络不好界面就会一直卡在转圈圈的界面，我们不能进行任何操作，这就是同步请求；如果我们点击某些页面就算网络不好我们还是可以操作页面，例如我们下载文件这个请求就是典型的异步请求。
Ajax技术就是一项发送异步请求的技术了。

2 原生Ajax使用示例（几年前的早期用法）

太繁琐，现在已经淘汰，了解一下
可以使用网页版的apifox、或者apipost（个人感觉apifox更好用，界面更加清晰，apipost界面有点复杂，好多功能要摸索）生成一个get请求响应数据作为测试
使用
- （1）准备数据地址: http://hmajax.itheima.net/api/province
  示例接口文档：获取-省份列表
- （2）创建XMLHttpRequest对象: 用于和服务器交换数据
- （3）向服务器发送请求
- （4）获取服务器响应数据

示例：

<body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div>
</body><script>function getData(){// 1 创建 XMLHttpRequest 对象var xmlHttpRequest = new XMLHttpRequest();// 2 发送异步请求xmlHttpRequest.open("GET","http://hmajax.itheima.net/api/province");xmlHttpRequest.send(); // 发送请求// 3 获取服务器响应的数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){      // 判断服务器是否响应成功//var data = JSON.parse(xmlHttpRequest.responseText);document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;// xmlHttpRequest.responseText ：返回服务器响应的数据，以字符串形式返回}}}</script>

查看结果：
在这里插入图片描述

代码解释
- 官方文档

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

参考视频

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网(使用文档等): https://www.axios-http.cn/
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

（2）常见的请求方式有哪些？

请求方法: 对服务器资源，要执行的操作
在这里插入图片描述

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据(全部)
DELETE	删除数据
PATCH	修改数据(部分)

比较常用的就是get和post请求，其余的说实话post请求好像也都能干

2 快速入门

step1: 引入Axios的js文件
<script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
使用 axios 函数发送请求，并获取响应结果
（1）传入配置对象
（2）再用 .then 回调函数接收结果，并做后续处理
下面的语法，默认是get请求

示例1：入门案例

参考视频

需求: 请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址: http://hmajax.itheima.net/api/province
接口文档说明

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') })</script>

结果：
在这里插入图片描述

示例2：入门案例+绑定事件

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div></body></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function getData(){// 通过axios发送异步请求,默认是GET请求axios({url: "http://hmajax.itheima.net/api/province"}).then(result =>{document.getElementById("div1").innerHTML = result.data.list.join('<br>');// 通过 result.data 获取服务器返回的的JSON对象})}</script>

结果：
在这里插入图片描述

3 Axios通用请求格式语法

通用请求格式语法

axios({method: 'post',        // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patchurl: '/user/123',      // 注意 参数传递的那部分要写写到params里面去data: { ... },         // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去params: { ... },       // 写到这个里面的请求参数会拼接到 url 中发送出去  http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
});

一般地：

url中要传递参数数据就写到params里面去，get,post方法可以
data里面可以传任何参数，特别是文件上传、json、xml等结构化数据都通过这个传，所以POST/PUT 数据会比较多
误区：params只能传递get数据、data只能传POST/PUT 数据（这个结合后端的接收请求接口就好理解了）
除了url，method，data，params都是可选项，根据实际情况判断是否要不要

具体的怎么发送还是要看后端接口是怎么写的
@RequestBody ：参数来源是请求体中的json等结构化数据
@RequestParam ：参数来源可以是url或者请求体的表单数据
@RequestPart：用于上传文件，参数来源是请求体中的表单数据
@PathVariable：参数来源是url中的路径变量

示例1：params传递参数发送get请求

语法: 使用 axios 提供的 params 选项
注意: axios 在运行时把参数名和值，会拼接到 url?参数名=值
城市列表: http://hmajax.itheima.net/api/city?pname=河北省

接口文档

<body><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>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>')})</script>
</body>

结果：
在这里插入图片描述

示例2：data传递参数发送post请求

参考视频

需求：

接口文档

<body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成，最少8位）password：密码  （最少6位）目标：点击按钮，通过axios提交用户和密码，完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'hejuzs_01',    // 注意，重新注册用户名要修改，同样用户名不能注册两次password: 'hejuzs_01'}})})</script>
</body>

结果：
在这里插入图片描述

综合案例：地区查询

参考视频

需求：
接口文档

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地区查询</title><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let p_name = document.querySelector('.province').valuelet c_name = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname:p_name,cname:c_name}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

结果：
在这里插入图片描述

4 axios 错误处理

参考视频

语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
处理:注册案例，重发注册时通过弹框提示用户错误原因
需求：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios错误处理</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'hejuzs_01',password: 'hejuzs_01'}}).then(result => {// 成功console.log(result)}).catch(error => {      // error里面可以捕获到错误信息，如果后端的java接口抛出异常信息，返回了了一个状态码不正常的响应信息，那么就会进入到catch里面捕获到// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

结果：
在这里插入图片描述

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

文章目录前言一、Ajax技术（从服务端获取数据，发送各种请求）0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例（几年前的早期用法） 二、 Axios技术(对原…...

编程日记 2026/5/1 17:34:30

【自学笔记】Python的基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 Python基础知识总览1. Python简介2. 安装与环境配置3. 基本语法3.1 变量与数据类型3.2 控制结构3.3 函数与模块3.4 文件操作 4. 面向对象编程（OOP&#…...

编程日记 2026/2/11 12:54:43

lambda表达式写java比较器

文章目录示例 1：按字符串长度比较示例 2：按数字大小比较示例 3：按对象属性比较（简洁：推荐）示例 4：使用 Comparator 的静态方法示例 5：链式比较在Java中，Comparator 是一…...

编程日记 2026/3/7 6:08:00

vim modeline

1. 什么是 Vim 模型行（modeline）？ Vim 模型行是嵌入在文件中的特殊注释行，用于告诉 Vim 编辑器如何配置编辑选项。它的语法格式如下： # vim: 选项1值1:选项2值2:...它以 # vim: 开头（# 是注释符&#xff…...

编程日记 2026/2/20 21:45:20

【赵渝强老师】Spark RDD的依赖关系和任务阶段

Spark RDD彼此之间会存在一定的依赖关系。依赖关系有两种不同的类型：窄依赖和宽依赖。窄依赖：如果父RDD的每一个分区最多只被一个子RDD的分区使用，这样的依赖关系就是窄依赖；宽依赖：如果父RDD的每一个分区被多个子RD…...

编程日记 2026/5/1 14:41:47

题目: 这道题很简单，直接根据题目无脑套公式代码： #include<bits/stdc.h> using namespace std; const int N 1e5 9; using ll long long; ll a[N], perfix[N]; int main() {ios::sync_with_stdio(0), cin.tie(0), cout.tie(0);//取消同步输…...

编程日记 2026/5/1 19:44:20

Python----Python高级（并发编程：线程Thread，多线程，线程间通信，线程同步，线程池）

一、线程Thread 1.1、线程线程（Thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位线程是程序执行的最小单位，而进程是操作系统分配资源的最小单位；一个进程由一个或多个线程…...

编程日记 2026/4/26 11:56:50

八大排序算法细讲

目录排序概念运用常见排序算法插入排序直接插入排序思想： 步骤（排升序）: 代码部分： 时间复杂度： 希尔排序思路步骤 gap的取法代码部分： 时间复杂度： 选择排序直接选…...

编程日记 2026/4/28 20:53:45

组合总和III(力扣216)

这道题在回溯的基础上加入了剪枝操作。回溯方面我就不过多赘述，与组合(力扣77)-CSDN博客大差不差，主要讲解一下剪枝(下面的代码也有回溯操作的详细注释)。我们可以发现，如果我们递归到后面，可能集合过小，无法满足题目…...

编程日记 2026/4/29 23:03:03

鲜牛奶订购系统的设计与实现

🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅 项目视频基…...

编程日记 2026/4/26 4:08:39

python:内置函数与高阶函数

1.内置函数 abs() round() print(abs(-6))#求绝对值 print(round(3.56))#四舍五入运行结果 6 4 2.高阶函数高阶函数：把一个函数作为参数传递给另外一个函数实例一：绝对值加减法与四舍五入 def add_num(a,b):return abs(a)abs(b) print(add_num…...

编程日记 2026/1/15 5:55:21

postgresql 函数错误捕捉

BEGIN 逻辑块 EXCEPTION WHEN 错误码（如：unique_violation） or others THEN 异常逻辑块 END; 在PL/pgSQL函数中，如果没有异常捕获，函数会在发生错误时直接退出，与其相关的事物也会随之回滚。我们可以通过使…...

编程日记 2025/7/9 20:28:08

Java面试场景题分享

假设你在做电商秒杀活动，秒杀开始时，成千上万的用户同时请求抢购商品。你会如何设计系统来处理这些请求，确保库存不超卖你如何保证库存的准确性？ 这个问题引导你思考如何在高并发下确保库存更新的原子性，最直接的方式…...

编程日记 2026/3/11 7:56:52

ESP32开发学习记录---》GPIO

she 2025年2月5日，新年后决定开始充电提升自己，故作此记,以前没有使用过IDF开发ESP32因此新年学习一下ESP32。 ESPIDF开发环境配置网上已经有很多的资料了，我就不再赘述，我这里只是对我的学习经历的一些记录。首先学习一个…...

编程日记 2026/5/2 17:16:09

【PyTorch】解决Boolean value of Tensor with more than one value is ambiguous报错

理解并避免 PyTorch 中的 “Boolean value of Tensor with more than one value is ambiguous” 错误在深度学习和数据科学领域，PyTorch 是一个强大的工具，它允许我们以直观和灵活的方式处理张量（Tensor）。然而，即使…...

编程日记 2026/4/25 2:50:16

文件 I/O 和序列化

文件I/O C#提供了多种方式来读写文件，主要通过System.IO命名空间中的类来实现，下方会列一些常用的类型： StreamReader/StreamWriter：用于以字符为单位读取或写入文本文件。 BinaryReader/BinaryWriter：用于以二进制格…...

编程日记 2025/7/4 0:39:49

python中的lambda function（ChatGPT回答）

Python 中的 lambda 函数是一个匿名函数，它没有名字，通常用于定义简单的、一次性使用的函数。它可以接受任意数量的参数，但只能有一个表达式，并且该表达式的结果就是返回值。 lambda 函数的语法是： lambda 参数1, 参…...

编程日记 2025/7/19 9:18:37

智慧停车系统：不同规模停车场的应用差异与YunCitys解决方案

在智慧停车领域，不同规模停车场因自身特点，对智慧停车系统的需求和应用效果存在显著差异。云创智城凭借丰富的经验和先进的技术，为各类规模停车场打造了贴合需求的智慧停车系统，下面为您详细剖析。小型停车场：精准高…...

编程日记 2026/4/30 18:08:15

AI软件栈：LLVM分析（三）

LLVM IR 文章目录 CFG线性IR 主要采用CFG与线性IR组合描述 CFG *关键在于基本块（Basic Block）的定义线性IR *关键来自于SSA，单静态赋值...

编程日记 2026/2/23 8:26:32

C++Primer逻辑和关系运算符

欢迎阅读我的【CPrimer】专栏专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...

编程日记 2026/4/29 8:23:29

从BIO到NIO：Java IO的进化之路

引言在 Java 编程的世界里，输入输出（I/O）操作是基石般的存在，从文件的读取写入，到网络通信的数据传输，I/O 操作贯穿于各种应用程序的核心。BIO（Blocking I/O，阻塞式 I/O&#xff0…...

编程日记 2025/8/6 5:50:27

VMware Win10下载安装教程（超详细）

《网络安全自学教程》从MSDN下载系统镜像，使用 VMware Workstation 17 Pro 安装 Windows 10 consumer家庭版和 VMware Tools。 Win10下载安装 1、下载镜像2、创建虚拟机3、安装操作系统4、配置系统5、安装VMware Tools 1、下载镜像到MSDN https://msdn.itellyou…...

编程日记 2026/4/27 1:14:12

Redis存储⑤Redis五大数据类型之 List 和 Set。

目录 1. List 列表 1.1 List 列表常见命令 1.2 阻塞版本命令 1.3 List命令总结和内部编码 1.4 List典型使用场景 1.4.1 消息队列 1.4.2 分频道的消息队列 1.4.3 微博 Timeline 2. Set 集合 2.1 Set 集合常见命令 2.2 Set 集合间命令 2.3 Set命令小结和内部编码 2.…...

编程日记 2026/5/1 6:09:54

3-kafka服务端之控制器

文章目录概述控制器的选举与故障恢复控制器的选举故障恢复优雅关闭分区leader的选举概述在Kafka集群中会有一个或多个broker，其中有一个broker会被选举为控制器（Kafka Controler），它负责管理整个集群中所有分区和副本的状态。…...

编程日记 2026/4/28 20:30:13

e2studio开发RA2E1(5)----GPIO输入检测

e2studio开发RA2E1.5--GPIO输入检测概述视频教学样品申请硬件准备参考程序源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置GPIO口配置按键口配置按键口&Led配置R_IOPORT_PortRead()函数原型R_IOPORT_PinRead()函数原型代码概述本篇文章主要介绍如何…...

编程日记 2026/5/1 16:15:00