ToB企服应用市场:ToB评测及商务社交产业平台

标题: Axios——熟悉 URL [打印本页]
作者: 丝    时间: 2024-8-6 12:01
标题: 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？



1.1. 定义


1.2. 概念


1.3. 例子



2. URL的组成



2.1. 协议






2.2. 域名






2.3. 资源路径






3. 练习——使用 axios 从服务器拿到新闻列表数据

目标资源地点（新闻数据地点）：http://hmajax.itheima.net/api/news


  1. <body>
  2.   //1.引入axios库
  3.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  4.   <script>
  5.   //2.使用axios函数
  6.     axios({
  7.       url: 'http://hmajax.itheima.net/api/news'
  8.     }).then(result => {
  9.       console.log(result)
  10.     })
  11.   </script>
  12. </body>
复制代码
4. URL 查询参数先容

4.1. 定义：


4.2. 语法：




5. axios－查询参数

5.1. 语法：


5.2. 注意：


都会列表：https://hmajax.itheima.net/api/city?pname=河北省




 6. 案例：根据输入的省份名字和都会名字，查询地区并渲染列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>案例_地区查询</title>
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  10.     <style>
  11.       :root {
  12.       font-size: 15px;
  13.       }
  15.       body {
  16.       padding-top: 15px;
  17.       }
  18.     </style>
  19.   </head>
  21.   <body>
  22.     <div class="container">
  23.       <form id="editForm" class="row">
  24.         <!-- 输入省份名字 -->
  25.         <div class="mb-3 col">
  26.           <label class="form-label">省份名字</label>
  27.           <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
  28.         </div>
  29.         <!-- 输入城市名字 -->
  30.         <div class="mb-3 col">
  31.           <label class="form-label">城市名字</label>
  32.           <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
  33.         </div>
  34.       </form>
  35.       <button type="button" class="btn btn-primary sel-btn">查询</button>
  36.       <br><br>
  37.       <p>地区列表: </p>
  38.       <ul class="list-group">
  39.         <!-- 示例地区 -->
  40.         <li class="list-group-item">东城区</li>
  41.       </ul>
  42.     </div>
  43.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  44.     <script>
  45.       /*
  46.       获取地区列表: http://hmajax.itheima.net/api/area
  47.       查询参数:
  48.       pname: 省份或直辖市名字
  49.       cname: 城市名字
  50.       */
  51.       // 目标: 根据省份和城市名字, 查询地区列表
  52.       // 1. 查询按钮-点击事件
  53.       document.querySelector('.sel-btn').addEventListener('click', () => {
  54.       // 2. 获取省份和城市名字
  55.       let pname = document.querySelector('.province').value
  56.       let cname = document.querySelector('.city').value
  58.       // 3. 基于axios请求地区列表数据
  59.       axios({
  60.       url: 'http://hmajax.itheima.net/api/area',
  61.       params: {
  62.         //属性名和属性值一致时，可省略
  63.       pname,
  64.       cname
  65.       }
  66.       }).then(result => {
  67.       // console.log(result)
  68.       // 4. 把数据转li标签插入到页面上
  69.       let list = result.data.list
  70.       console.log(list)
  71.       let cityShow = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
  72.       console.log(cityShow)
  73.       document.querySelector('.list-group').innerHTML = cityShow
  74.       })
  75.       })
  76.       
  77.     </script>
  78.   </body>
  80. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4