Ajax入门
文章目录
- 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=>{// 处理错误
})