<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>ul li {list-style: none;border: 2px solid;width: 300px;height: 30px;text-align: center;}</style></head><body><form action=""><div class="p"><span>省份</span><input type="text"></div><div class="c"><span>城市</span><input type="text"></div></form><button>查询</button><span style="background-color: aquamarine;">地区列表</span><ul><li></li></ul><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script>let btn = document.querySelector("button")btn.onclick = function() {//获取输入的省份信息let p = document.querySelector(".p input").value//获取输入的城市信息let c = document.querySelector(".c input").value//获取列表容器，以便存入地区信息let list = document.querySelector("ul")axios({// 接收和返回数据的地址url: 'http://hmajax.itheima.net/api/area',params: {// url根据给定的省份和城市的信息去检索数据pname: p,cname: c,}}).then(// result是接收到的指定数据之结果result => {//返回的结果列表let resultList = result.data.listconsole.log(resultList) //(3) ['梁子湖区', '华容区', '鄂城区']// 将每一个元素分割开let theList = resultList.map(areaName =>`<li>${areaName}</li>`).join(" ")list.innerHTML = theList})}</script></body>
</html>
