zoukankan      html  css  js  c++  java
  • JSON的简单应用

    首先你要导入相应的json的jar包

    大概就是这么多,网上下载下来导进去就行啦

    Java代码:(此处写的list4 里面存的是HlsPlay这个对象,我们要把这个list4里面所有的对象显示到前端    前段提交查询指令以后就调用这个方法,然后返回给前端的js处理)

     1 public String  getAll() {
     2 JSONArray array = new JSONArray();
     3         for (HlsPlay play : list4) {
     4             JSONObject obj = new JSONObject();
     5             try {
     6                 obj.put("name", play.getCname());
     7                 obj.put("count", play.getCount());
     8                 obj.put("LAtime", play.getLAtime());
     9                 obj.put("rellname", play.getName());
    10             } catch (Exception e) {
    11             }
    12 
    13             array.add(obj);
    14         }
    15 return array.toString();
    16 }

    JavaScript代码:

    function getInfo(){
        $("#informations").html("");
        $.post("HlsView",{choice:'get',url_name:"",rtsp:"",ZSflg:""}, function(data) {//JQ提交
    //        console.log(data)
         var counter=0;
             
             $.each(data,function(i,v){
                 counter=counter+1;
                     var insertText = '<tr><td>'+counter+'</td><td>'+v.name+'</td><td>'+v.count+'</td><td>'+v.LAtime+'</td><td><p id="'+v.rellname+'" onclick="deleteAccess(this)"  style="color:blue;font-weight:bold ;text-decoration:underline">删除</p></td></tr>';
                     //下面这个方法是把这些HTML插入到指定ID(此处是information)后面       
                    document.getElementById("informations").insertAdjacentHTML("afterBegin",insertText);
             });
    
        }, "json");
    
    }

    HTML代码:

     1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4 <title>视频监控中心</title>
     5 </head>
     6     <meta charset="utf-8" />
     7     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     8     <meta  http-equiv="Cache-Control"   content="private"> 
     9     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    10     <link rel="stylesheet" href="Plugin/layui_v1.0.2/css/layui.css" />
    11     <script src="Plugin/layui_v1.0.2/layui.js"></script>
    12     <script type="text/javascript" src="scripts/jquery.js"></script>
    13     <script type="text/javascript" src="js/HLSVIEW.js" ></script>
    14 
    15 <body>
    16 
    17     <table class="layui-table lay-even lay-skin="nob">
    18   <colgroup>
    19     <col>
    20   </colgroup>
    21   <thead>
    22     <tr> 
    23       <th>序号</th>
    24       <th>通道</th>
    25       <th>在线访问数量</th>
    26       <th>最近访问</th>
    27       <th>操作</th>
    28     </tr> 
    29   </thead>
    30   <tbody id="informations">
    31     <!-- 插入数据 -->
    32   </tbody>
    33 </table>
    34     </body>
    35 </html>
  • 相关阅读:
    linux 彻底删除文件及 find命令permission refused问题解决
    ubuntu系统中dpkg lock问题分析及解决
    ubuntu server18.04 更换默认源为阿里源-加速
    docker安装与卸载( liunx )
    ubuntu下dpkg lock问题
    docker pull报x509问题及docker启动失败问题解决
    windows 常用命令行操作
    uwsgi运行django应用是报错no app loaded. going in full dynamic mode
    internal server error原因及解决
    docker-compose启动容器后执行脚本或命令不退出 | 运行内部程序
  • 原文地址:https://www.cnblogs.com/Vziiii/p/6410770.html
Copyright © 2011-2022 走看看