Json对象和字符串互相转换 数据拼接 JSON使用方式
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>
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>
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);
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>
其他 ，如果从后台读取的json 年份：{"year":116}, 如果想要显示正常的年份 可以用 1900+116 =2016 从1900算 + 返回的 = 现在的年份（其他方法更好，）
Jsonp：:
或者创建script
写了这么多， 希望对你有帮助，如有失误 一起讨论，一起进步！！ ☺
借鉴来源：http://www.jb51.net/article/40842.htm
