Ajax-案例-地区查询

案例-地区查询#

需求：根据输入的省份名字和城市名字，查询地区并渲染列表

首先：确认 URL 网址和参数说明

• 查询某个省内某个城市的所有地区： http://hmajax.itheima.net/api/area
• 参数名：

  pname：省份名或直辖市名，如北京、福建省...

  cname：城市名，如北京市、厦门市...

省份名称

城市名称

下属区县

// 根据省份和城市名字，查询地区列表
const search = document.querySelector('.search')
// 绑定点击事件
search.addEventListener('click', function() {
    // 点击后获取输入参数
    let pname = document.querySelector('.province input').value
    let cname = document.querySelector('.city input').value
    // axios请求
    axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
            // 参数以变量方式放入，参数名和变量名相同可简写
            // pname: pname,
            // cname: cname
            pname,
            cname
        }
    }).then(result => {
        console.log(result);
        let list = result.data.list
        let lis = list.map(areaName => `
${areaName}
`).join('')
        document.querySelector('.areas').innerHTML = lis
    })
})