获取省市区（axios）

 //1.获取省的数据
axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
    const data = result.data.list.map(pname => {
        return `  <option value="${pname}" data-name ="pname">${pname
            }</option>
`
    }).join('')
    document.querySelector('.province').innerHTML = data +`<option value="">省份</option>`

})
//2.检测变化，获取市的数据
document.querySelector('.province').addEventListener('change', async e => {
            //获取省份名字
    const name = document.querySelector('.province').value
    console.log(name)
    //根据省，获取到城市
 
        
           //用await替代了then（）方法，直接取得结果
        const result = await axios({

            url: "http://hmajax.itheima.net/api/city",
            params: {
                pname: name
            }
        })

        console.log(result)
        const sfdata = result.data.list.map(cname => {
            return `  <option value="${cname}" data-name ="pname">${cname
            }</option>      `
        }).join('')
        document.querySelector('.city').innerHTML = sfdata + `<option value="">地区</option>`


    })
//3.获取地区数据，要先检测市的情况
document.querySelector('.city').addEventListener('change', async e => {
    console.log(e.target.value)
    const result = await axios({
        url: "http://hmajax.itheima.net/api/area",
        params: {
            pname: document.querySelector('.province').value,
            cname: e.target.value
        }
    })
    //这一步都大致相同
    const dqdata = result.data.list.map(cname => {
        return `  <option value="${cname}" data-name ="pname">${cname
            }</option>      `
    }).join('')
    document.querySelector('.area').innerHTML = dqdata + `<option value="">地区</option>`
})

目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据

目标2：收集数据提交保存
  2.1 监听提交的点击事件
  2.2 依靠插件收集表单数据
  2.3 基于axios提交保存，显示结果

document.querySelector('.submit').addEventListener('click', () => {
    const form = document.querySelector('.info-form')
    const data = serialize(form, { hash: true, empty: true })
    try {
        const result = await axios({
            url: "http://hmajax.itheima.net/api/feedback",
            method: 'post',
            data: data
        })
        alert(result.data.message)
    }
    catch (error) {
        console.dir(error)
        alert(error.message)

    }


})