master

分支 (1)

管理

管理

master

axios_test
/
封装axios2.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询城市列表</title>
    <style>
        .box {
            width: 500px;
            margin: 100px auto;
        }

        .flex {
            width: 500px;
            display: flex;
            height: 100px;
            /* space-around：两端对齐，项目两侧间隔相等 */
            justify-content: space-around;
        }

        .width {
            margin-top: 20px;
            width: 200px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid #bfbaba;
        }

        .button {
            margin-left: 20px;
            display: inline-block;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #4285f4;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s, box-shadow 0.3s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        .button:hover {
            background-color: #3367d6;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }

        .button:active {
            background-color: #1c50b7;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
        }

        li {
            list-style: none;
        }

        .domainList {
            margin-top: 50px;
            width: 500px;
            display: flex;
            flex-direction: column;
        }

        .listItem {
            margin-left: 20px;
            height: 30px;
            border: 1px solid #DCDCDC;
            justify-content: space-around;
            padding-top: 10px;
            padding-left: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="flex">
            <div class="province">
                省份
                <br>
                <input type="text" value="北京" placeholder="请输入省份名字，如：河南省" class="provinceName width">
            </div>
            <div class="city">
                城市
                <br>
                <input type="text" value="北京市" placeholder="请输入城市名字，如：郑州市" class="cityName width">
            </div>
        </div>

        <button class="button">查询</button>

        <div class="domainList">
            <li class="listItem">暂无信息</li>

        </div>
    </div>

</body>
<script src="./axios.js"></script>
<script>

    //1. 查询点击按钮事件
    document.querySelector('.button').addEventListener('click', () => {
        const pname = document.querySelector('.provinceName').value
        const cname = document.querySelector('.cityName').value
        const qObj = {
            pname,
            cname
        }
        myAxios({
            url: 'http://hmajax.itheima.net/api/area',
            params: qObj
        }).then(result => {
            const data = JSON.parse(result)
            const { list } = data
            const htmlCity = list.map(name => {
                return `<li class="listItem">${name}</li>`
            }).join('')

            document.querySelector('.domainList').innerHTML = htmlCity
            setTimeout(() => {
                alert(data.message)
            }, 100)

        }).catch(error => {
            document.querySelector('.box').innerHTML = error
            console.log(error);
        })

    })


</script>

</html>