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>