axios体验

引入axios库

使用axios语法

java 复制代码

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

完整实例

java 复制代码

<!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选项

java 复制代码

axios({
	url: '目标资源地址'，
	params:{
		参数名:值
	}
}).then((result)=>{
	// 对服务器返回的数据做后续处理
})

注意：axios在运行时把参数名和值，会拼接到url ?参数名=值

demo

java 复制代码

<!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：提交的数据

java 复制代码

axios({
	url: '目标资源地址',
	method:'请求方法',
	data:{
		参数名：值
	}
}).then((result)=>{
	// 对服务器返回的数据做后续处理
})

axios错误处理

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

java 复制代码

axios({
	// 请求选项
}).then(result=>{
	// 处理数据
}).catch(error=>{
	// 处理错误
})

Ajax入门

文章目录

axios体验

axios-查询参数

常用请求方法

数据提交

axios错误处理