前端ajax怎么渲染数据,ajax请求解析json数据渲染在前端界面

记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~

共计

在线

离线

$.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 += '

' + key + '' +

map[key] + '

';

}

$(".numArea").append(html);

}

})

json的数据格式如下：

{

"total": 16,

"onLine": 4,

"outLine": 12,

"regions": {

"食堂": 1,

"图书馆": 22,

"设计部": 15

}

}