02.URL的基本知识和使用_url相关知识-CSDN博客

本文链接：https://blog.csdn.net/qq_53914247/article/details/136516786

博客主要介绍了URL相关知识，包括其定义、组成部分（协议、域名、资源路径），还解释了http协议、域名和资源路径的含义。同时阐述了URL查询参数的作用、语法，以及axios携带查询参数的方法，并给出获取河北省下属城市列表的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.认识 URL

1. 为什么要认识 URL ?

虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下

2. 什么是 URL ？

统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）

3. URL 的组成?

协议，域名，资源路径（URL 组成有很多部分，我们先掌握这3个重要的部分即可）

4. 什么是 http 协议 ?

叫超文本传输协议，规定了浏览器和服务器传递数据的格式（而格式具体有哪些稍后我们就会学到）

5. 什么是域名 ?

标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以

6. 什么是资源路径 ?

一个服务器内有多个资源，用于标识你要访问的资源具体的位置

二.URL 查询参数

1. 什么是查询参数 ?

携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

2. 查询参数的语法？

在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
参数名一般是后端规定的，值前端看情况传递即可

3. axios 如何携带查询参数?

使用 params 选项即可
```
axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})
```
查询城市列表的 url地址：http://hmajax.itheima.net/api/city

参数名：pname （值要携带省份名字）

4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：

<!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>
</head>
<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>
</html>

小结

1. URL 是什么？

 统一资源定位符，网址，用于访问服务器上资源

2. 请解释这个 URL，每个部分作用？

http://hmajax.itheima.net/api/news

协议://域名/资源路径

3. URL 查询参数有什么用？

浏览器提供给服务器额外信息，获取对应的数据

4. axios 要如何携带查询参数？

使用 params 选项，携带参数名和值在对象结构中