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>
  • 相关阅读:
    爬取淘宝商品信息
    eclipse 搭建Robotium环境--apk 环境搭建
    android studio2.0 搭建Robotium环境--有被测源代码的情况下
    mysql 特殊语句
    电脑浏览器访问文件夹
    mindmanager 15 停止工作
    yum被lock Existing lock /var/run/yum.pid: another copy is running as pid 1580. Another app is currently holding the yum lock; waiting for it to exi
    jenkins安装及部署
    ant+jmeter
    charles抓包及篡改
  • 原文地址:https://www.cnblogs.com/Vziiii/p/6410770.html
Copyright © 2011-2022 走看看