zoukankan      html  css  js  c++  java
  • 以常见页面元素展示JSON数据

     1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     2 <html>
     3 <head>
     4     <title>jsondemo</title>
     5     <script src="js/jquery-1.12.4.min.js"></script>
     6 </head>
     7 <body>
     8 <script type="text/javascript">
     9 
    10     $(function () {//
    11         var json = {"name":"jillion","age":18};
    12         console.log(typeof json);//Object
    13         //js中将js的对象转化成字符串,有利于网络间的传输
    14         var str = JSON.stringify(json);//String if yes
    15         //"{'name':'jillion','age':18}"
    16         //将json格式的字符串如何转换成对象,方便属性的获取
    17         var obj = JSON.parse(str);
    18        // alert(obj.name);
    19 
    20 
    21         //json字符串数组
    22         var countryArray = [ "中国",  "美国",  "俄罗斯" ];
    23         var $countryArray = $(countryArray);
    24         $countryArray.each(function (i) {
    25             $("#arraySel").append("<option value='"+(i+1)+"'>"+this+"</option>");
    26             $("#arrayUl").append("<li>"+this+"</li>")
    27         })
    28 
    29         //json对象数组
    30         // var userObjArray = [
    31         //     {"name":"jillion","age":18},
    32         //     {"name":"小龙","age":17},
    33         //     {"name":"岚岚","age":16},
    34         //     {"name":"必成","age":8}
    35         // ];
    36         // //1.$.each(arr,function(i,obj){})
    37         // //2.$arr.each(function(i,obj){});
    38         // var aa = $("#tabledemo").append("<tr><td>序列号</td><td>姓名</td><td>年龄</td></tr>");
    39         // $.each(userObjArray,function (i, obj) {
    40         //     aa.append("<tr><td>"+(i+1)+"</td><td>"+(obj.name)+"</td><td>"+(obj.age)+"</td></tr>")
    41         // })
    42 
    43         var yonghuArray = [
    44             {"ID":"1","name":"admin","address":"北京市海淀区","mobile":"12312345678"},
    45             {"ID":"2","name":"梅西","address":"湖北省武汉市","mobile":"12315263748"},
    46             {"ID":"3","name":"詹姆斯","address":"四川省成都市","mobile":"12312345679"},
    47             {"ID":"4","name":"乔丹","address":"北京市海淀区","mobile":"12312345689"},
    48         ];
    49 
    50         var kgc = $("#cc").append("<tr>"+
    51                 "<td>ID</td><td>姓名</td><td>住址</td><td>手机");
    52         $.each(yonghuArray,function (i,obj) {
    53             kgc.append("<tr><td>"+(i+1)+"</td><td>"+(obj.name)+"</td><td>"+
    54                 (obj.address)+"</td><td>"+(obj.mobile)+"</td><tr>")
    55 
    56         })
    57     })
    58 
    59 
    60 </script>
    61 JSON格式的字符串数组:
    62 <select id="arraySel"></select>
    63 <ul id="arrayUl"></ul>
    64 <table id="cc" border='1'>
    65 
    66 </table>
    67 </body>
    68 </html>
    View Code

  • 相关阅读:
    linux上修改系统默认语言设置
    【计算机基础之编程语言】编程语言的发展
    【Java语言特性学习之四】常用集合
    【Java语言特性学习之三】Java4种对象引用
    【Java语言特性学习之二】反射
    【网络知识之七】QUIC(http3)
    【网络知识之六】UDP
    【网络知识之五】TCP
    【网络知识之四】HTTP/2
    【网络知识之三】HTTPS协议
  • 原文地址:https://www.cnblogs.com/lpbk/p/11691964.html
Copyright © 2011-2022 走看看