查询某个省内某个城市的所有地区 接口:http://hmajax.itheima.net/api/area
参数名:
pname:省份名字或直辖市名字,比如北京、福建省、辽宁省…
cname:城市名字,比如北京市、厦门市、大连市…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
省:<input type="text">
市:<input type="text">
<button>查询</button>
<ul>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
// http://hmajax.itheima.net/api/area
// 给按钮设置点击事件
document.querySelector("button").onclick = function () {
// 获取省市的input表单值
let inp = document.querySelectorAll("input")
let pname = inp[0].value
let cname = inp[1].value
axios({
url: "http://hmajax.itheima.net/api/area",
params: {
// 传入省市
pname,
cname
}
}).then(result => {
// console.log(result);
// 处理一下获取到的数据
let list = result.data.list.map(item => `<li>${item}</li>`).join("")
// 获取ul
document.querySelector("ul").innerHTML = list
})
}
</script>
</html>
文章来源:https://www.toymoban.com/news/detail-817204.html
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!文章来源地址https://www.toymoban.com/news/detail-817204.html
到了这里,关于黑马axios案例之地区查询的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!