文章目录
- axios体验
- axios-查询参数
- 常用请求方法
- 数据提交
- axios错误处理
axios体验
-
引入axios库
-
使用axios语法
axios({ url: '目标资源地址' }).then((result)=>{ // 对服务器返回的数据做后续处理 })
-
完整实例
<!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>AJAX概念和axios使用</title> </head> <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> <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> </body> </html> -
运行结果
axios-查询参数
- 语法：使用axios提供的params选项
axios({ url: '目标资源地址'， params:{ 参数名:值 } }).then((result)=>{ // 对服务器返回的数据做后续处理 }) - 注意：axios在运行时把参数名和值，会拼接到url
?参数名=值
-
demo
<!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>AJAX查询参数</title> </head> <body> <!-- axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 省份数据地址：http://hmajax.itheima.net/api/city 目标: 使用axios库, 获取省份列表数据, 展示到页面上 1. 引入axios库 --> <p class="my-p"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 2. 使用axios函数 axios({ url:'http://hmajax.itheima.net/api/city', // 查询参数 params:{ pname:'贵州省' } }).then((result)=>{ console.log(result.data.list) document.querySelector('.my-p').innerHTML=result.data.list.join('<br>') }) </script> </body> </html> -
运行结果
常用请求方法
- 请求方法：对服务器资源，要执行的操作
请求方法 操作 GET 获取数据 POST 提交数据 PUT 修改数据（全部） DELETE 删除数据 PATCH 修改数据（部分）
数据提交
axios请求配置
- url：请求的URL地址
- method：请求的方法，GET可以省略不写（不区分大小写）
- data：提交的数据
axios({ url: '目标资源地址', method:'请求方法', data:{ 参数名：值 } }).then((result)=>{ // 对服务器返回的数据做后续处理 })
axios错误处理
语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
// 请求选项
}).then(result=>{
// 处理数据
}).catch(error=>{
// 处理错误
})
![[Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序](https://img-blog.csdnimg.cn/5d5e7339cb5048b88a3adce727c9ab6d.png)
