记录一个简单的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 } }
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif)