JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.
一、JSON字符串转换为JSON对象: eval() 和 JSON.parse
eg- json字符串: var data = '{ "name": "dran", "sex": "man" }';
var obj = eval("("+data+")"); 或者
var obj = JSON.parse(data);
然后,就可以这样读取: alert(obj.name + obj.sex);
提示:为什么要 eval这里要添加 ("("+data+")");呢?
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句
二、JSON对象转换为JSON字符串 : obj.toJSONString()或者全局方法JSON.stringify(obj) (obj代表json对象)
eg-json对象: var obj = { "name": "dran", "sex": "man" };
var jstring = JSON.stringify(obj) ;// 建议用这个
var jstring = obj.toJSONString(); //toJSONString()不是js原生的方法,需要引入相应的库或自己定义后才能用 (不习惯用)
然后,就可以这样读取: alert(jstring);
注意:
目前,Firefox、Opera、IE8以上版本也提供了本地JSON支持。其中,JSON解释器提供的函数有:JSON.parse、JSON.stringify。 对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js,来实现JSON转换功能。
在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。
在AJAX实现前后台数据交互的时候,通常使用JSON的数据格式,对于JSON来说,有严格的代码规范,一旦格式出问题,就无法显示出相应效果,同时还不在控制台报错
补充: ajax读取json数据拼接显示:
json文件:
{
"first":[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"},
],
"second":[
{"name":"上海大学","area":"上海"},
{"name":"武汉大学","area":"武汉"},
{"name":"北京大学","area":"北京"},
{"name":"山东大学","area":"山东"},
]
}
html和ajax代码
1、用for循环
1 $.ajax({
2 url : "ceshi.json",
3 type : "POST",
4 dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写
5 success: function(data) {
6 var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
7 var arr1 = dataJson.first;
8 var arr2 = dataJson.second;
9 //一栏显示 用for循环完成数组解析
10 for(var i = 0; i<arr1.length; i++){
11 for(var j = 0; j<arr2.length; j++){
12 var str='<div style="display:block">'+
13 '<div>姓名:'+arr1[i].name+' 性别:'+arr1[i].sex+'</div>'+
14 '<div>学校:'+arr2[j].name+'</div>'+
15 '<div>地点:'+arr2[j].area+'</div>'+
16 //'<div>喜好:'+arr1[i].like+'</div>'+ //全显示
17 //'<div>喜好:'+arr1[i].like[1]+'</div>'+ //单独设置
18 //'<div>喜好:'+arr1[i].like[0]+'</div>'+
19 '</div>';
20 }
21
22 $(".result").append(str);
23
24 }
25
26
27
28
29 //分层显示
30 //var str = "";
31 // var str1 = "";
32 // if (arr1 != null) {
33 // for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值
34 // str += "<span>" + arr1[i].name + "</span><span>" + arr1[i].sex + "</span><br>";
35 // }
36 // $(".result").html(str);
37 // }
38 // if (arr2 != null) {
39 // for (var j = 0; j < arr2.length; j++) {
40 // str1 += "<span>" + arr2[j].name + "</span><span>" + arr2[j].area+ "</span><br>";
41 // }
42 // $(".result2").html(str1);
43 // }
44 },
45 error:function(data){
46 alert("error");
47 }
48 })
49 <div class="result">frist:</div>
50 <div class="result2">second:</div>
View Code for
2、 each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中
1 JSON:
2 [
3 {"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
4 {"name":"李四","sex":"男"},
5 {"name":"王武","sex":"男"},
6 {"name":"李梅","sex":"女"},
7 ]
8 $.ajax({
9 url : "ceshi.json",
10 type : "POST",
11 dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写
12 success: function(data) {
13 var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
14
15 //each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中 i 表示索引 item 信息值 对象
16 $.each(dataJson,function(i,item){
17 var str='<div style="display:block">'+
18 '<div>姓名:'+item.name+' 性别:'+item.sex+'</div>'+
19 '<div>like:'+item.like+'</div>'+
20 '</div>';
21 $(".result").append(str);
22 })
23
24
25 },
26 error:function(data){
27 alert("error");
28 }
29 })
30
31 <div class="result"></div>
View Code each
PS:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变
$.each()函数不同于JQuery对象的each()方法,它是一个全局函数, 第1个参数以一个数组或者对象, 第2个参数以一个回调函数作为。回调函数拥有两个参数:第1个为索引(0开始),第2个为对应变量或内容。
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$(".username").val(), content:$(".content").val()},
dataType: "json",
success: function(data){
$('#Text').empty(); //清空Text里面的所有内容
var str = '';
$.each(data, function(i, comment){
str += '<div class="comment"><h6>' +comment['username']+ ':</h6><p class="para">' +comment['content']+ '</p></div>';
});
$('#Text').html(str);
}
});
});
});
JSON 数据使用方法:
//json对象:
var jsonObj= {
"name":" 张三",
"sex":"男",
"age":26,
};
使用: jsonObj.name= "张三"
jsonObj.age= "26"
//json数组: []下标 从 0 开始
var jsonArr =[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
]
使用: jsonArr[0].sex="男"
jsonArr[1].name="李四"
//多个数组: []下标 从 0 开始
var options = {
"city" :[
{
"name":"上海",
"area":"普陀区",
"option":"真北路",
"correct":"1"
},
{
"name":"石家庄",
"area":"河北",
"option":"在北方",
"correct":"2"
}],
"world":[
{
"title":"美国",
"content":"好莱坞大片 科幻"
},
{
"title":"中国",
"content":"爱我中华,虽远必诛"
}
]
};
options.city[0].area="普陀区"
options.world[1].content="爱我中华,虽远必诛
多json遍历
var ceshi = {
"states": [{
"grouptype": "B",
"elems": [
{
"elemId": "B1",
"elemName": "税则号B1"
},
{
"elemId": "B2",
"elemName": "税则号2B"
}]
}, {
"grouptype": "U",
"elems": [{
"elemId": "U1",
"elemName": "税则号U"
}, {
"elemId": "U2",
"elemName": "税则号2U"
}],
},
]
}
console.log(ceshi.states);
for (var i = 0; i < ceshi.states.length; i++) {
if (ceshi.states[i].grouptype == "B") {
for (var j = 0; j < ceshi.states[i].elems.length; j++) {
alert(ceshi.states[i].elems[j].elemName); //税则号B1 税则号2B
};
} else {
//alert("没有");
}
if (ceshi.states[i].grouptype == "U") {
for (var j = 0; j < ceshi.states[i].elems.length; j++) {
alert(ceshi.states[i].elems[j].elemName); //税则号U 税则号2U
};
} else {
//alert("没有");
}
}var ceshi= {
"rtnInfos":[{
"id":0,
"states":[{
"attrValue":"sdfsd",
"elems":[
{"elemName":"税则号","id":0,},
{"elemName":"税则号1","id":1,}
],
"groupType":"f",
}]
}],
"rtnFlag":"T"
}
var mde =ceshi.rtnInfos[0].states[0].elems;
alert(mde[1].elemName);js 要在document加载完才能找到dom元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
6 <meta content="yes" name="apple-mobile-web-app-capable" />
7 <meta content="black" name="apple-mobile-web-app-status-bar-style" />
8 <meta content="telephone=no" name="format-detection" />
9 <meta http-equiv="Cache-Control" content="no-transform" />
10 <meta http-equiv="Cache-Control" content="no-siteapp" />
11 <title></title>
12 <link rel="stylesheet" href="/css/new.css">
13 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
14 </head>
15 <body>
16 <div class="result">
17 <div class="c-apply-one"></div>
18 </div>
19 <script type="text/javascript">
20 /*var ceshi = {
21 "states": [{
22 "grouptype": "B",
23 "elems": [
24 {
25 "elemId": "B1",
26 "elemName": "税则号B1"
27 },
28 {
29 "elemId": "B2",
30 "elemName": "税则号2B"
31 }]
32 }, {
33 "grouptype": "U",
34 "elems": [{
35 "elemId": "U1",
36 "elemName": "税则号U"
37 }, {
38 "elemId": "U2",
39 "elemName": "税则号2U"
40 }],
41 },
42
43 ]
44 }
45 console.log(ceshi.states);
46 for (var i = 0; i < ceshi.states.length; i++) {
47 if (ceshi.states[i].grouptype == "B") {
48 for (var j = 0; j < ceshi.states[i].elems.length; j++) {
49 alert(ceshi.states[i].elems[j].elemName); //税则号B1 税则号2B
50 };
51 } else {
52 //alert("没有");
53 }
54 if (ceshi.states[i].grouptype == "U") {
55 for (var j = 0; j < ceshi.states[i].elems.length; j++) {
56 alert(ceshi.states[i].elems[j].elemName); //税则号U 税则号2U
57 };
58 } else {
59 //alert("没有");
60 }
61
62 }*/
63 var ceshi ={
64 "rtnInfo": [
65 {
66 "appCode": "app1",
67 "appDesc": "a3",
68 "appIconUrl": "a2",
69 "appName": "app1",
70 "contractUrl": "a4",
71 "id": 0,
72 "specUrl": "a1",
73 "states": [
74 {
75 "applyId": 1,
76 "attrName": "apply1",
77 "attrValue": "sdfsd",
78 "dispOrder": 1,
79 "elems": [
80 {
81 "appCode": "",
82 "belongToState": "b",
83 "className": "",
84 "elemId": "5",
85 "elemName": "legaperson",
86 "id": 0,
87 "inputOption": "<select id=''><option value='0' selected=''>组织1</option><option value='1'>组织2</option>ntt<option value='2'>组织3</option>nt<option value='3'>组织4</option></select>",
88 "inputOrder": 1,
89 "inputType": "option",
90 "isRequired": "y",
91 "maxLength": 20,
92 "validationRegex": ""
93 },
94 {
95 "appCode": "",
96 "belongToState": "b",
97 "className": "",
98 "elemId": "6",
99 "elemName": "ore",
100 "id": 0,
101 "inputOption": "",
102 "inputOrder": 1,
103 "inputType": "text",
104 "isRequired": "n",
105 "maxLength": 0,
106 "validationRegex": ""
107 },
108 {
109 "appCode": "",
110 "belongToState": "b",
111 "className": "",
112 "elemId": "7",
113 "elemName": "hs",
114 "id": 0,
115 "inputOption": "",
116 "inputOrder": 1,
117 "inputType": "text",
118 "isRequired": "y",
119 "maxLength": 20,
120 "validationRegex": ""
121 },
122 {
123 "appCode": "",
124 "belongToState": "b",
125 "className": "",
126 "elemId": "9",
127 "elemName": "type",
128 "id": 0,
129 "inputOption": "<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxx",
130 "inputOrder": 1,
131 "inputType": 'radio',
132 "isRequired": "n",
133 "maxLength": 0,
134 "validationRegex": ""
135 },
136 {
137 "appCode": "",
138 "belongToState": "s",
139 "className": "",
140 "elemId": "server",
141 "elemName": "服务组合",
142 "id": 0,
143 "inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
144 "inputOrder": 1,
145 "inputType": 'radio',
146 "isRequired": "y",
147 "maxLength": 0,
148 "validationRegex": ""
149 },
150
151 {
152 "appCode": "",
153 "belongToState": "s",
154 "className": "",
155 "elemId": "plan",
156 "elemName": "套餐",
157 "id": 0,
158 "inputOption": "<textarea rows='10'>套餐1:nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
159 "inputOrder": 1,
160 "inputType": "text",
161 "isRequired": "y",
162 "maxLength": 0,
163 "validationRegex": ""
164 },
165 {
166 "appCode": "",
167 "belongToState": "f",
168 "className": "",
169 "elemId": "title",
170 "elemName": "发票头",
171 "id": 0,
172 "inputOption": "",
173 "inputOrder": 1,
174 "inputType": "text",
175 "isRequired": "y",
176 "maxLength": 20,
177 "validationRegex": ""
178 },
179 {
180 "appCode": "",
181 "belongToState": "f",
182 "className": "",
183 "elemId": "taxpayer",
184 "elemName": "是否为纳税人",
185 "id": 0,
186 "inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
187 "inputOrder": 1,
188 "inputType": 'radio',
189 "isRequired": "y",
190 "maxLength": 0,
191 "validationRegex": ""
192 }
193 ],
194 "groupType": "f",
195 "id": 0,
196 "isAttach": "0"
197 },
198 {
199 "applyId": 1,
200 "attrName": "apply1",
201 "attrValue": "sdfsd",
202 "dispOrder": 1,
203 "elems": [
204 {
205 "appCode": "",
206 "belongToState": "u",
207 "className": "",
208 "elemId": "3",
209 "elemName": "repassword",
210 "id": 0,
211 "inputOption": "",
212 "inputOrder": 1,
213 "inputType": "password",
214 "isRequired": "y",
215 "maxLength": 20,
216 "validationRegex": ""
217 },
218 {
219 "appCode": "",
220 "belongToState": "u",
221 "className": "",
222 "elemId": "4",
223 "elemName": "email",
224 "id": 0,
225 "inputOption": "",
226 "inputOrder": 1,
227 "inputType": "text",
228 "isRequired": "y",
229 "maxLength": 20,
230 "validationRegex": " /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/"
231 },
232 {
233 "appCode": "",
234 "belongToState": "s",
235 "className": "",
236 "elemId": "server",
237 "elemName": "服务组合",
238 "id": 0,
239 "inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
240 "inputOrder": 1,
241 "inputType": 'radio',
242 "isRequired": "y",
243 "maxLength": 0,
244 "validationRegex": ""
245 },
246 {
247 "appCode": "",
248 "belongToState": "s",
249 "className": "",
250 "elemId": "plan",
251 "elemName": "套餐",
252 "id": 0,
253 "inputOption": "<textarea rows='10'>套餐1:nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
254 "inputOrder": 1,
255 "inputType": "text",
256 "isRequired": "y",
257 "maxLength": 0,
258 "validationRegex": ""
259 },
260 {
261 "appCode": "",
262 "belongToState": "f",
263 "className": "",
264 "elemId": "title",
265 "elemName": "发票头",
266 "id": 0,
267 "inputOption": "",
268 "inputOrder": 1,
269 "inputType": "text",
270 "isRequired": "y",
271 "maxLength": 20,
272 "validationRegex": ""
273 },
274 {
275 "appCode": "",
276 "belongToState": "f",
277 "className": "",
278 "elemId": "taxpayer",
279 "elemName": "是否为纳税人",
280 "id": 0,
281 "inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
282 "inputOrder": 1,
283 "inputType": 'radio',
284 "isRequired": "y",
285 "maxLength": 0,
286 "validationRegex": ""
287 },
288
289 ],
290 "groupType": "b",
291 "id": 0,
292 "isAttach": "0"
293 },
294 {
295 "applyId": 1,
296 "attrName": "apply1",
297 "attrValue": "sdfsd",
298 "dispOrder": 1,
299 "elems": [
300 {
301 "appCode": "",
302 "belongToState": "u",
303 "className": "",
304 "elemId": "1",
305 "elemName": "phone",
306 "id": 0,
307 "inputOption": "",
308 "inputOrder": 1,
309 "inputType": "text",
310 "isRequired": "y",
311 "maxLength": 20,
312 "validationRegex": "^1[3|4|5|8][0-9]d{4,8}$"
313 },
314 {
315 "appCode": "",
316 "belongToState": "b",
317 "className": "",
318 "elemId": "5",
319 "elemName": "legaperson",
320 "id": 0,
321 "inputOption": "<select id=''><option value='0' selected=''>组织1</option><option value='1'>组织2</option>ntt<option value='2'>组织3</option>nt<option value='3'>组织4</option></select>",
322 "inputOrder": 1,
323 "inputType": "option",
324 "isRequired": "y",
325 "maxLength": 20,
326 "validationRegex": ""
327 },
328 {
329 "appCode": "",
330 "belongToState": "b",
331 "className": "",
332 "elemId": "8",
333 "elemName": "customs",
334 "id": 0,
335 "inputOption": "",
336 "inputOrder": 1,
337 "inputType": "text",
338 "isRequired": "y",
339 "maxLength": 20,
340 "validationRegex": ""
341 },
342 {
343 "appCode": "",
344 "belongToState": "b",
345 "className": "",
346 "elemId": "9",
347 "elemName": "type",
348 "id": 0,
349 "inputOption": "<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxx",
350 "inputOrder": 1,
351 "inputType": 'radio',
352 "isRequired": "n",
353 "maxLength": 0,
354 "validationRegex": ""
355 },
356 {
357 "appCode": "",
358 "belongToState": "s",
359 "className": "",
360 "elemId": "server",
361 "elemName": "服务组合",
362 "id": 0,
363 "inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
364 "inputOrder": 1,
365 "inputType": 'radio',
366 "isRequired": "y",
367 "maxLength": 0,
368 "validationRegex": ""
369 },
370 {
371 "appCode": "",
372 "belongToState": "f",
373 "className": "",
374 "elemId": "taxpayer",
375 "elemName": "是否为纳税人",
376 "id": 0,
377 "inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
378 "inputOrder": 1,
379 "inputType": 'radio',
380 "isRequired": "y",
381 "maxLength": 0,
382 "validationRegex": ""
383 },
384 {
385 "appCode": "",
386 "belongToState": "f",
387 "className": "",
388 "elemId": "bank",
389 "elemName": "开户行",
390 "id": 0,
391 "inputOption": "",
392 "inputOrder": 1,
393 "inputType": "text",
394 "isRequired": "y",
395 "maxLength": 20,
396 "validationRegex": ""
397 }
398 ],
399 "groupType": "s",
400 "id": 0,
401 "isAttach": "0"
402 },
403 {
404
405 "applyId": 1,
406 "attrName": "apply1",
407 "attrValue": "sdfsd",
408 "dispOrder": 1,
409 "elems": [
410 {
411 "appCode": "",
412 "belongToState": "u",
413 "className": "",
414 "elemId": "1",
415 "elemName": "phone1",
416 "id": 0,
417 "inputOption": "",
418 "inputOrder": 1,
419 "inputType": "text",
420 "isRequired": "y",
421 "maxLength": 20,
422 "validationRegex": "^1[3|4|5|8][0-9]d{4,8}$"
423 },
424
425 {
426 "appCode": "",
427 "belongToState": "b",
428 "className": "",
429 "elemId": "5",
430 "elemName": "legaperson5",
431 "id": 0,
432 "inputOption": "<select id=''><option value='0' selected=''>组织1</option><option value='1'>组织2</option>ntt<option value='2'>组织3</option>nt<option value='3'>组织4</option></select>",
433 "inputOrder": 1,
434 "inputType": "option",
435 "isRequired": "y",
436 "maxLength": 20,
437 "validationRegex": ""
438 },
439 {
440 "appCode": "",
441 "belongToState": "b",
442 "className": "",
443 "elemId": "6",
444 "elemName": "ore6",
445 "id": 0,
446 "inputOption": "",
447 "inputOrder": 1,
448 "inputType": "text",
449 "isRequired": "n",
450 "maxLength": 0,
451 "validationRegex": ""
452 },
453
454 {
455 "appCode": "",
456 "belongToState": "b",
457 "className": "",
458 "elemId": "9",
459 "elemName": "type9",
460 "id": 0,
461 "inputOption": "<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxxnt<input type='radio' name='radio1'/>xxx",
462 "inputOrder": 1,
463 "inputType": 'radio',
464 "isRequired": "n",
465 "maxLength": 0,
466 "validationRegex": ""
467 },
468 {
469 "appCode": "",
470 "belongToState": "s",
471 "className": "",
472 "elemId": "server",
473 "elemName": "服务组合10",
474 "id": 0,
475 "inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
476 "inputOrder": 1,
477 "inputType": 'radio',
478 "isRequired": "y",
479 "maxLength": 0,
480 "validationRegex": ""
481 },
482 {
483 "appCode": "",
484 "belongToState": "s",
485 "className": "",
486 "elemId": "plan",
487 "elemName": "套餐11",
488 "id": 0,
489 "inputOption": "<textarea rows='10'>套餐1:nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
490 "inputOrder": 1,
491 "inputType": "text",
492 "isRequired": "y",
493 "maxLength": 0,
494 "validationRegex": ""
495 },
496 {
497 "appCode": "",
498 "belongToState": "f",
499 "className": "",
500 "elemId": "title",
501 "elemName": "发票头12",
502 "id": 0,
503 "inputOption": "",
504 "inputOrder": 1,
505 "inputType": "text",
506 "isRequired": "y",
507 "maxLength": 20,
508 "validationRegex": ""
509 },
510 {
511 "appCode": "",
512 "belongToState": "f",
513 "className": "",
514 "elemId": "taxpayer",
515 "elemName": "是否为纳税人13",
516 "id": 0,
517 "inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
518 "inputOrder": 1,
519 "inputType": 'radio',
520 "isRequired": "y",
521 "maxLength": 0,
522 "validationRegex": ""
523 },
524 {
525 "appCode": "",
526 "belongToState": "f",
527 "className": "",
528 "elemId": "bank",
529 "elemName": "开户行14",
530 "id": 0,
531 "inputOption": "",
532 "inputOrder": 1,
533 "inputType": "text",
534 "isRequired": "y",
535 "maxLength": 20,
536 "validationRegex": ""
537 },
538 {
539 "appCode": "",
540 "belongToState": "f",
541 "className": "",
542 "elemId": "accountNumber",
543 "elemName": "账号15",
544 "id": 0,
545 "inputOption": "",
546 "inputOrder": 1,
547 "inputType": "text",
548 "isRequired": "y",
549 "maxLength": 20,
550 "validationRegex": ""
551 },
552 {
553 "appCode": "",
554 "belongToState": "f",
555 "className": "",
556 "elemId": "address",
557 "elemName": "注册地址16",
558 "id": 0,
559 "inputOption": "",
560 "inputOrder": 1,
561 "inputType": "text",
562 "isRequired": "y",
563 "maxLength": 20,
564 "validationRegex": ""
565 }
566 ],
567 "groupType": "u",
568 }
569 ]
570 }
571 ],
572 "errInfo": "",
573 "errorCode": "",
574 "rtnFlag": "T"
575 }
576 for(var i=0; i<ceshi.rtnInfo[0].states.length; i++){
577 // alert(ceshi.rtnInfo[0].states[i].grouptype);
578 var page01="";
579 var dataBase = ceshi.rtnInfo[0].states[i];
580 if(dataBase.groupType=="u"){
581 for(var b=0; b<dataBase.elems.length; b++){
582 //alert(dataBase.elems[b].elemName);
583 //page02 += '<label for="" class="">'+dataBase.elems[b].elemName+':</label>';
584 page01 +='<div class="form-group">'+
585 '<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">'+dataBase.elems[b].elemName+':</label>'+
586 '<div class="pull-left">'+
587 '<input type="'+dataBase.elems[b].inputType+'" class="input-control put-width440 '+dataBase.elems[b].elemId+'" name="'+dataBase.elems[b].elemId+'" placeholder="" value="">'+
588 '</div>'+
589 //'<div class="pull-left">'+dataBase[b].inputOption+'</div>'+
590 '</div>';
591
592 }
593 // alert(page01);
594 $(".result").html(page01);
595 }
596 }
597
598 </script>
599 </body>
600 </html>
View Code
其他 ,如果从后台读取的json 年份:{"year":116}, 如果想要显示正常的年份 可以用 1900+116 =2016 从1900算 + 返回的 = 现在的年份(其他方法更好,)
Jsonp::
或者创建script
写了这么多, 希望对你有帮助,如有失误 一起讨论,一起进步!! ☺