<script type="text/javascript">
//通过js调用接口展示数据--Ajax
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
xmlhttp.withCredentials = true;
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "http://local.hzrfapi.com/Cad/PointAdmin/pointPopulation", true);
// xmlhttp.open("POST", "http://dev.hzrfapi.ybzg.com/Cad/PointAdmin/pointPopulation", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
// xmlhttp.setRequestHeader("Content-type","application/json");//添加Content-type
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//得到数据后,前端可以操作数据
let res = xmlhttp.responseText;
//把后端给过来的数据转换成json格式
//res = JSON.stringify(res);
res = JSON.parse(res);
document.getElementById("point_num").innerHTML = res.data.point_num;
document.getElementById("current_people").innerHTML = res.data.current_people;
document.getElementById("avg_staty").innerHTML = res.data.avg_staty;
document.getElementById("capacity_people").innerHTML = res.data.capacity_people;
document.getElementById("return_people").innerHTML = res.data.return_people;
//如果是单个值,直接显示
console.log(res);
//如果是数组,需要循环遍历出来
// for (let i = 0;i<res.length;i++){
// //console.log(res[i]);
// //通过DOM选择器,放lu里面
// document.querySelector("#uid").innerHTML+="<li>"+res[i]+"</li>"
// }
}
}
</script>
前端通过ajax,调后端接口
最新推荐文章于 2022-11-17 15:37:22 发布