专栏首页编程微刊ajax请求解析json数据渲染在前端界面

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
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery拼接数据循环一个数据列表

    但从后端请求过来json数据之后,需要把数据做成循环列表,那么,怎么jquery拼接数据循环一个数据列表?现在写一个简单的demo,效果如下所示:

    祈澈菇凉
  • 根据select下拉框值判断验证条件

    根据select下拉框值判断当前选中的是哪个区域,并且判断当前选中区域里面的值是否为空,如果为空,则弹出弹框提示,请输入xx区域名称,以下只是一个小demo,随...

    祈澈菇凉
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    祈澈菇凉
  • jquery拼接数据循环一个数据列表

    但从后端请求过来json数据之后,需要把数据做成循环列表,那么,怎么jquery拼接数据循环一个数据列表?现在写一个简单的demo,效果如下所示:

    祈澈菇凉
  • Bug or Feature?藏在 requests_html 中的陷阱

    在写爬虫的过程中,我们经常使用 XPath 来从 HTML 中提取数据。例如给出下面这个 HTML:

    青南
  • 重置密码

    当用户不小心忘记了密码时,网站需要提供让用户找回账户密码的功能。在示例项目中,我们将发送一封含有重置用户密码链接的邮件到用户注册时的邮箱,用户点击收到的链接就可...

    追梦人物
  • vue-学习笔记(更新中...)

    xing.org1^
  • 在线商城项目14-阶段性自测与bug修复

    前面把商品列表页的查询展示逻辑基本完成了。每个功能单独测试是没有问题了,但是连在一起呢?新增的功能是否会对以前的功能产生影响。

    love丁酥酥
  • Vue.js学习笔记(2)

    程序员不务正业
  • DIV模拟输入框

    用户4344670

扫码关注云+社区

领取腾讯云代金券