Ajax入门

最新推荐文章于 2024-07-25 13:12:09 发布

小吴在敲Bug

最新推荐文章于 2024-07-25 13:12:09 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： ajax 前端

本文链接：https://blog.csdn.net/qq_45042462/article/details/132144257

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

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 修改数据（部分）

请求方法	操作
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=>{
	// 处理错误
})

小吴在敲Bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax入门

语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参。
复制链接

扫一扫

专栏目录