Ajax使用XMLHttpRequest查询某省份地区

揭开画皮

已于 2024-10-24 09:39:44 修改

阅读量109

点赞数 2

文章标签： ajax 1024程序员节

于 2024-10-24 08:55:33 首次发布

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/143199226

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>


输入省份：<input class="province" type="text" value="辽宁省"><br />

输入城市 <input class="city" type="text" value="辽阳市">
<button class="getarea">查询</button>

<script>
    // 根据省份和城市查询地区
    // 1.添加点击事件
    document.querySelector(".getarea").addEventListener('click', () => {
        let cname = document.querySelector(".city").value
        let pname = document.querySelector(".province").value

        // 2.将查询参数组织成对象
        const Obj = {
            pname,
            cname
        }
        console.log(Obj)

        //3.将对象转为参数字符串
        const paramsObj = new URLSearchParams(Obj)
        const queryString = paramsObj.toString()
        console.log(queryString)

        // 4.使用XMLHttpRequest,查询地区列表
        const xhr = new XMLHttpRequest()
        xhr.open('get', `http://ajax-api.itheima.net/api/area?${queryString}`)
        xhr.addEventListener('loadend', () => {
            console.log(xhr.response)
            const data = JSON.parse(xhr.response)
            console.log(data)
        })
        // 5.发送请求
        xhr.send()

    })
</script>
</body>


</html>