Axios——熟悉 URL
目次1. 什么是 URL？
1.1. 定义
1.2. 概念
1.3. 例子
2. URL的组成
2.1. 协议
2.2. 域名
2.3. 资源路径
3. 练习——使用 axios 从服务器拿到新闻列表数据
4. URL 查询参数先容
4.1. 定义：
4.2. 语法：
5. axios－查询参数
5.1. 语法：
5.2. 注意：
1. 什么是 URL？
https://i-blog.csdnimg.cn/blog_migrate/a74d2846c90f68048e6496f47a0824a6.png
1.1. 定义
[*]统一资源定位符（英语： Uniform Resource Locator ，缩写： URL ，或称统一资源定位器、定位地点、 URL 地点)俗称网页地点，简称网址，是因特网上标准的资源的地点（ Address )，如同在网络上的门牌。它最初是由蒂姆．伯纳斯﹣李发明用来作为万维网的地点，现在它已经被万维网联盟编制为因特网标准 RFC 1738。
1.2. 概念
[*]URL 就是统一资源定位符，简称网址，用于访问网络上的资源
1.3. 例子
https://i-blog.csdnimg.cn/blog_migrate/18ce3a996cb624d4c589d67f82af3a63.png
2. URL的组成
https://i-blog.csdnimg.cn/blog_migrate/71f32719226cc16b31f235dfe7d4f6a0.png
2.1. 协议
[*]http 协议：超文本传输协议，规定欣赏器和服务器之间传输数据的格式
https://i-blog.csdnimg.cn/blog_migrate/896b2d9170e2f390398ffbc24cc10cec.png
https://i-blog.csdnimg.cn/blog_migrate/d01c4dbad68fa7e21140368eb9e70f84.png
2.2. 域名
[*]域名：标记服务器在互联网中方位
https://i-blog.csdnimg.cn/blog_migrate/2137855935f8f85f421bccb0a5b00e9b.png
https://i-blog.csdnimg.cn/blog_migrate/3b95258caeb13fa758fc70286c62a0c4.png
2.3. 资源路径
[*]资源路径：标记资源在服务器下的详细位置
https://i-blog.csdnimg.cn/blog_migrate/64e0df8185a72a583e5230dbd31c8a5c.png
https://i-blog.csdnimg.cn/blog_migrate/33e228749552a955230d07d2f18318b9.png
3. 练习——使用 axios 从服务器拿到新闻列表数据
目标资源地点（新闻数据地点）：http://hmajax.itheima.net/api/news
https://i-blog.csdnimg.cn/blog_migrate/a91c8644e1b707b39bebef82ee01dd03.png
<body>
//1.引入axios库
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//2.使用axios函数
axios({
url: 'http://hmajax.itheima.net/api/news'
}).then(result => {
console.log(result)
})
</script>
</body> 4. URL 查询参数先容
4.1. 定义：
[*]欣赏器提供给服务器的额外信息，让服务器返回欣赏器想要的数据
4.2. 语法：
[*]http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
https://i-blog.csdnimg.cn/blog_migrate/38d9176bc231e80eb2fa72cb0d044e83.png
5. axios－查询参数
5.1. 语法：
[*]使用 axios 提供的 params 选项
5.2. 注意：
[*]axios 在运行时把参数名和值，会拼接到 url?参数名=值
都会列表：https://hmajax.itheima.net/api/city?pname=河北省
https://i-blog.csdnimg.cn/blog_migrate/3c2f67e74f9a25910405dc2681732882.png
https://i-blog.csdnimg.cn/blog_migrate/895eeb4c973296d9a1edc12de654b949.png
6. 案例：根据输入的省份名字和都会名字，查询地区并渲染列表
<!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">
<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 pname = document.querySelector('.province').value
let cname = document.querySelector('.city').value
// 3. 基于axios请求地区列表数据
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
//属性名和属性值一致时，可省略
pname,
cname
}
}).then(result => {
// console.log(result)
// 4. 把数据转li标签插入到页面上
let list = result.data.list
console.log(list)
let cityShow = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
console.log(cityShow)
document.querySelector('.list-group').innerHTML = cityShow
})
})
</script>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]