ajax请求解析json数据渲染在前端界面
记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<div class="areaPage">
<div class="totalnum">
<div class="allNum">
<p>共计</p>
<p id="total"></p>
</div>
<div class="onNum">
<p>在线</p>
<p id="onLine"></p>
</div>
<div class="offNum">
<p>离线</p>
<p id="outLine"></p>
</div>
</div>
<div class="numArea"></div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "data.json",
type: "GET",
dataType: "json",
success: function(data) {
console.log(JSON.stringify(data))
// 显示在线离线人数
$("#total").html(data.total);
$("#onLine").html(data.onLine);
$("#outLine").html(data.outLine);
// 各部门人数显示
var map = data.regions;
var html = "";
for(var key in map) {
html += '<div class="areaBottom" ><span>' + key + '</span><span>' +
map[key] + '</span></div>';
}
$(".numArea").append(html);
}
})
</script>
</html>json的数据格式如下：
{
"total": 16,
"onLine": 4,
"outLine": 12,
"regions": {
"食堂": 1,
"图书馆": 22,
"设计部": 15
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
