以常见页面元素展示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 ></select>
63 <ul ></ul>
64 <table  border='1'>
65 
66 </table>
67 </body>
68 </html>
View Code

以常见页面元素展示JSON数据