javascript/jquery 读取多维 json

发表于   |   分类于   |     |   阅读次数

近日，项目要求对一些长列表页进行优化、改成下拉滚动异步加载的形式。这样一来，php后台 只需扔一串 json 数据过来，剩下的全部工作就由 web前端 为所欲为啦！其实也就只是把 json 数据填进前端的样式页面而已嘛。顺利完成该工作后，发现自己在 javascript/jquery 读取多维 json 数据还是略显费劲。于是自定义了一些 json 数组去折腾折腾探个究竟。

js/jq 读取多维 json 逐一探索

用最笨的方式，先定义一个多维 json ，然后以各种方式去尝试读取摸索，最后得出想要的方式。
直接上代码，里面全是赤露露的测试实验数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>json</title>
</head>
<body>
<h4>json test</h4>
<a href="javascript:void(0);" id="testid">点击读取</a>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    var data='';
    data={
        "allow": true,
        "message": "yes",
        "grade1": {
            "class1": [
                {
                    "id": "111",
                    "num": "40",
                    "boy": "25",
                    "girl":"15"
                },
                {
                    "id": "112",
                    "num": "50",
                    "boy": "20",
                    "girl":"30"
                },
                {
                    "id": "113",
                    "num": "40",
                    "boy": "25",
                    "girl":"15"
                }
            ],
            "class2": [
                {
                    "id": "121",
                    "num": "40",
                    "boy": "25",
                    "girl":"15"
                },
                {
                    "id": "122",
                    "num": "40",
                    "boy": "25",
                    "girl":"15"
                },
                {
                    "id": "123",
                    "num": "40",
                    "boy": "25",
                    "girl":"15"
                }
            ],
            "class3": []
        },
        "grade2": {
            "class1": [],
            "class2": [
                {
                    "id": "221",
                    "num": "50",
                    "boy": "35",
                    "girl":"15"
                },
                {
                    "id": "222",
                    "num": "50",
                    "boy": "35",
                    "girl":"15"
                },
                {
                    "id": "223",
                    "num": "50",
                    "boy": "35",
                    "girl":"15"
                }
            ],
            "class3": []
        }
    };
    //一、jquery 遍历读取json
    $(function(){
        $('#testid').click(function(){
            console.log(data);
            // alert(data);    //[object,Object]
            // alert(data.allow);  //true
            // alert(data.message);  //yes
            // alert(data.grade1);  //[object,Object]
            // alert(data.grade1.class1);  //[object,Object],[object,Object],[object,Object]
            // alert(data.grade1.class1.id);   //undefined
            //1.1 直入
            $.each(data.grade1.class1,function(i,item){
                // alert(i);   //0,1,2
                // alert(item);    //三个 [object,Object]
                $.each(item,function(i,item){
                    // alert(i);   //id,num,boy,girl,id,num,boy,girl,id,num,boy,girl
                    // alert(item);    //111,40,25,15,112,40,25,15,113,40,25,15
                    
                });
            });
            //1.2 条件
            $.each(data,function(i,item){
                // alert(i);   //allow,message,grade1,grade2
                // alert(item);    //true,yes,[object,Object],[object,Object]
                if(i=='grade1'){
                    $.each(item,function(i,item){
                        // alert(i);   //class1,class2,class3
                        // alert(item);    
                        //[object,Object],[object,Object],[object,Object]
                        //[object,Object],[object,Object],[object,Object]
                        //(空)
                        if(i=='class1'){
                            $.each(item,function(i,item){
                                // alert(i);   //0,1,2
                                // alert(item);    //[object,Object]
                                // alert(item.id);     //221,222,223
                            });
                        }
                    });
                }
            });
        });
    });
    //二、javascript 遍历读取json
    //2.1 摸索实验
    for(var o in data){
        // alert(o);   //allow,message,grade1,grade2
        if(o=='message'){
            // alert(data.o);      //undefine
            // alert(data[o]);     //yes,
        }
        if(o=='grade1'){
            // alert(data[o]);     //[object,Object]
            // alert(data[o].class1);  //[object,Object],[object,Object],[object,Object]
            // alert(data[o][class1]);  //报错：class1 is not defined
            /*
            for(var oo in o){
                // alert(oo);      //0,1,2,3,4,5
                // alert(o.oo);        //6个undefine
            }
            */
            for(var oo in data[o]){
                // alert(oo);      //class1,class2,class3
                if(oo=='class2'){
                    // alert(oo);      //class2
                    // alert(oo.id);       //undefine
                    /*for(var ooo in data[o].class2){
                        // alert(ooo);     //0,1,2
                        // alert(ooo.id);      //三个undefine
                        alert(data[o].class2.ooo);  //三个undefine
                    }*/
                    for(var ooo in data[o][oo]){
                        //或者：for(var ooo in data[o].class2)
                        // alert(ooo);     //1,2,3
                        // alert(data[o][oo][ooo]);    //三个 [object,Object]
                        // alert(data[o][oo][0]);    //三个 [object,Object]
                        for(var oooo in data[o][oo][ooo]){
                            // alert(oooo);    //三次 id,num,boy,girl
                            // alert(data[o][oo][ooo][oooo]);  //对应上一行的12个数字：121,40,25
                        }
                    }
                }
            }
        }
    }
    //2.2 直入
    for(var o in data.grade1.class2){
        // alert(o);   //0,1,2
        for(var oo in data.grade1.class2[o]){
            // alert(oo);      //三次 id,num,boy,girl
            // alert(data.grade1.class2[o][oo]);  //对应上一行的12个数字：121,40,25
        }
    }
    //2.2 长变量重新赋给短的
    var mydata=data.grade1.class2;
    for(var o in mydata){
        // alert(o);   //0,1,2
        for(var oo in mydata[o]){
            alert(oo);      //三次 id,num,boy,girl
            // alert(mydata[o][oo]);  //对应上一行的12个数字：121,40,25
        }
    }
</script>
</body>
</html>

ajax 异步请求 data 数填入 html 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var ajaxNum=1;      //php后台要求告诉他是第几次请求，给递增参数吧
$(window).on('scroll',function(){
    //滚动条到达底部：发现移动端和PC网页端，对于相同的的页面高度、总是有0.xxx的误差，所以用Math.ceil(）将其向上取整就好了。
    if($(document).height()-$(window).height() == Math.ceil($(window).scrollTop())){
        //alert('到达底部！');
        ajaxNum=ajaxNum+1;
        ajaxGiveme(ajaxNum);
    }
});
function ajaxGiveme($num)
{
    $.ajax({
        type:"POST",
        url:"/xxx/xxxxxx",  //php后台的接口地址
        dataType:"json",
        data:{"num":$num},
        success:function(data){
            //对 data 进行遍历读取吧
            //将数据填入 html 结构，这里有注意的事情，看下一点说明
        },
        error:function(request){
            // alert('提交失败，请稍后尝试');
            return false;
        }
    });
}

json 填入 html 的一些事儿

  • html 与 json 数据变量的混结合：注意 "" ，''啊！尤其是注意 src，href 的 引号啊！
js
1
2
3
4
5
6
7
8
9
10
<!-- html页面 -->
<div class='div1'>
    <a href='order/order_result/123'>链接</a>
    <img class='img-big' src='images/list1.png'>
    <span>说明</span>
</div>
<!-- jquery -->
var newhtml="<div class='div1'><a href='order/order_result/"+item.id+"'>链接</a><img class='img-big' src='"+item.pic_detail+"'><span>"+item.instroduction+"</span></div>";
$('#id').append(newhtml);
  • php 与 html，js 与 html
    php 可在 html 写判断决定某元素是否出现，我大 js 也来吧：
1
2
3
<?php if($v['can1']==1 || $v['can2']==3):?>
    <a href="javascript:;" class="link">链接</a>
<?php endif;?>
1
2
3
4
5
6
7
var can=item.can1==1 || item.can2==3;
if(can){
    //插入 <a href="javascript:;" class="link">链接</a>
}
else{
    //none
}

php 还可以嵌在 html 里计算什么的各种。js当然也能啦！
还有其它很多的技巧、考虑，就得以后多用多实践了。有了这一次的开始，就让它根本停不下来吧！