【ajax基础02】URL详解

一：什么是URL

统一资源定位符(Uniform Resource Locator,缩写：URL),简称网址

二：URL组成

https://baidu.com/index.html

协议

https协议：超文本传输协议，规定了浏览器和服务第之间传输数据的格式

域名（在url中必须写）

域名：标记服务器在互联网中方位

如果不写就找不到对应的服务器，也就找不到对应服务器中的资源。

例如有www.baidu.com百度服务器、www.taobao.com淘宝服务器等互联网中的其它服务器

资源路径

资源路径：标记资源在服务器中的具体位置

三：URL查询参数

定义：

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法格式：

http://xxx.com/xxx?参数名1 = 值1&参数名2 = 值2

?后的内容即为url中的查询参数，通过特定的查询要求，去进行特定数据的获取

如何利用axios实现特定数据查询：

axios函数中提供了params选项，用于携带查询参数，将其拼接到url?参数名=值

语法格式:

axios({
    url:'网址',
    params:{
        参数名:值
    }
}).then(result=>{
    //对获取的数据进行的处理
})

案例：

1 单地区查询

获取省份列表下，辽宁省下市的数据

<body>
    <div class="p-name"></div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        axios({
            url: 'https://hmajax.itheima.net/api/city',
            params: {
                pname: '辽宁省'
            }
        }).then(result => {
            console.log(result);
            document.querySelector('.p-name').innerHTML = result.data.list.join('<br>')
        })
    </script>
</body>

2 多地区查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>省份名称：</p>
    <input type="text" class="province">
    <p>城市名称：</p>
    <input type="text" class="area">
    <button class="btn">查询</button>
    <p>地区列表：</p>
    <ul class="end">
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //点击完按钮后，实现数据的查询
        document.querySelector('.btn').addEventListener('click', function () {
            const pro = document.querySelector('.province').value
            const area = document.querySelector('.area').value
            axios({
                url: 'https://hmajax.itheima.net/api/area',
                params: {
                    pname: pro,
                    cname: area
                }
            }).then(result => {
                // console.log(result);
                document.querySelector('.end').innerHTML = result.data.list.join('<br>')
            })
        })
    </script>
</body>

</html>