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);
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOwAAABSCAIAAADYca9GAAABvklEQVR4nO3X0WnDMBiFUc+lgQydIUt4Gs0S8DDtww+qiJ0maR+aC+c8qUISIXwo6vIByS6Xy/IJya7Xq4iJJ2LiiZh4IiaeiIknYuKJmHgiJp6IiSdi4omYeCImnoiJJ2LiiZh4IiaeiIknYuKJmHgiJp6IiSdi4omYeCImnoiJJ2LiiZh4IiaeiIknYuKJmHgiJp6IiSdi4omYeCJ+oPfeWvvvT8FPRPyAiN+fiB8Q8fsT8QMifn8iPrdMRsSttd77mNn3fazpvY+N27bV5LZtY7I21mCMx4Lnj+JIxCfmktZ1nSNelu9vbF3XGlSUY2/NV5f7vtdkHVIr5wWvHsWRiG/dvB/mP+smnhePm3Iub9TWWhsRj8l74yeP4kjEt56MuG7H+pWf79RfRPzSURyJ+MT8nGitnUY8x12X6Nj7asQvHcWRiE+Mf7zqgrz3nKgncr1c//iceP4ojkRMPBETT8TEEzHxREw8ERNPxMQTMfFETDwRE0/ExBMx8URMPBETT8TEEzHxREw8ERNPxMQTMfFETDwRE0/ExBMx8URMPBETT8TEEzHxREw8ERNPxMQTMfFETDwRE0/ExPsCO/3iMN2GhnAAAAAASUVORK5CYII=” alt=”” />
提示：为什么要 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);
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOoAAACVCAIAAADZgvENAAAHQUlEQVR4nO3cTW8T1x6A8fOVbAkvLBdoFynbCim2VClhZan9CDaWV0FN7djzclaRZdQdFitvrBJCqNquEqfALaSWLbZXohDdBtpFysJ3ccho5JexE4bY/5nnpwgNzrycM/N4MkkEqla3t2p1rbXWeqtWr9Vts1yp1izb0Vrbjt6sVG1Ha60t261Ua2YFNmTDhW+oHFe7rrZs17Jd19WOq+uWY9mu2Uvdcsxe/MuW7dYthw3ZcOEbqm8AsdQQEIt8IRj5QjDyhWDkC8HIF4KRLwQjXwhGvhCMfCEY+UIw8oVg5AvByBeCkS8EI18IRr4QjHwhGPlCMPKFYOQLwcgXgpEvBCNfCEa+EIx8IRj5QjDyhWDkC8HIF4KRLwQjXwhGvhCMfCEY+UIw8oVg5Dtbp9NJp9OLHgUmWFi+SinLsobDYTqdtizr0vqYdriAYYSS7wWOu1T7Dz6iZVlKLaClxeTb6XTy+bxZzufzl5nvtMMFDCOUfC9w3KXa/8wj5vP5TqcT+lGCLSZfy7LMrXd4Nu3LzHfi4QKGEVa+5z3uUu1/5hH91/TSLD7fEeahQinlPV0Mh8PBYKDOeG9xs+y96C379+xtNfFwZreDwWDaSDzeRUqn0+ZA5pVpAxufwvxnxtvhtFn4v1Ln83nv69g885p50i48oxjla77uTPyUUspcD/818K6QOd3emqYh86J/K28F7xKa7EaONfMye6P15+sPa9rAxqcwD//g/SMZn4U5gdNuq8HzCj5pF56RZVnjb6RPbQH5Bs9z5Gp5y+O3Jf+a48vefSX4BjzRSBb+v46/DYIH5p/CPMx+vE0CZjGy5vz7DzhpHzmjgLvSJ7KMd9+RM2Xe8Wb9aTfXifle+IFvznznGdh58/W2mjmLT5Hvx8woLnff4axn35EzNfL9wZz5DsceAMaPNefDQzqdnpjvPAM7V75msiMHmjgL8/6f9iOF4HnN+Z4/74xi9Ox7rnyHZ3cj8wQ2f74TvwvxC7jM/q/a/kpGHh5mDmzixZ74jGuY/aizZ82Jsxh5Fj/vt27BJ+1iMxrGKl//z31jKJLTj9HPfYe+37rFkPmhwaJHEaZ4/dYNCAX5QjDyhWDkC8HIF4KRLwQjXwhGvhCMfCEY+UIw8oVg5AvByBeCkS8EI18IRr4QjHwhGPlCMPKFYOQLwcgXgpEvBCNfCEa+EIx8IRj5QjDyhWDkC8HIF4KRLwQjXwhGvhCMfCEY+UIw8oVg6r+AWOotIBb5QjDyhWDkC8HIF4KRLwQjXwhGvhCMfCEY+UIw8oVg5AvByBeCkS8EI9+l9sPjF6v1nUy5HZmP1frOD49fhHV+yHd53X30/Jr+eeXg5EbvfWQ+Vg5Orumf7z56HsopIt/ldbP2YKV78u3L00UPJEzfvjxd6Z7crD0IZW/ku7wy5faNP94vehThu/HH+0y5HcquyHd5mXxPIod8Y8Hk+1fkkG8skO9M5Lu8MuX2l0f//u/TuHXr1v379wNWSKVSwStc2JdH/5Jv9Jl8j8Nw584ddabVarVaLeXTarWOj4+73a4K1O12QxkM+cZCiPkaqVTq+Pi42+2ur6+bV1qtlrfc7XbNChOtr6+TL84hU26vHJ2+CcnBwcHGxsabN29SqVQqlRq5s5pPXY6Vo1Pyjb5Mub3y4vR1SNbW1kyp9+7du3Llyv7+/v7+/tra2uvXrzfOBD88bGxshDKSlRfkGwOZcvuLZ/+8DEOz2VRKNZvNXC7XbDaTyeRImqVSaWSTvb29XC4XytFHfPHsH/KNvhDzTSaTJlwv3729PS/QUqnk5VsqlZrN5kvyxUfKlNufP/17EJJcLtdoNMyf43ff27dvm9WSyeTu7u5gMNjd3fWvkEwmwxrJ50//Jt/oM/n2Q5LNZhuNRjabLRaLyWSy3+8/fPgwm832+/1isVgsFvv9fqPRUEo1Gg3/Z0NHvrGQKbevP33XC8nq6qq5jyYSiUKh0Ov1dnZ2VldXe71eoVAwryildnZ2lFKFQsH7bOiuP31HvtEXer7b29u9Xi+RSJhXTKCJREIptb297a3Q87XuF1bN5BsLmXL7+pN3R5Fz/Qn5xkCm3L7229vnkXPtt7fkG33kOxP5Li+T738ih3xjIVNuXz08eRY5Vw9PyDf6btYeXP3l1deHfz6JkK8P/7z6yyv+qWb03X30PGP/9Nmvrz47/Cs6H7++ytg/8Q/lY6Gx+/tX1R8X/n+LhPjxVfXHxu7vYZ0f8oVg5AvByBeCkS8EI18IRr4QjHwhGPlCMPKFYOQLwcgXgpEvBCNfCEa+EIx8IRj5QjDyhWDkC8HUN4BYSmuttd6qWVs1yyxXqrW6ZWutXVdvVqqW42qtLcfdrFRdV2ut65ZTqdbYkA0XvqGyHW072nZc23HNsnW24C077uTX2ZANF7uh2qpbla0PXVe3alv1D11vVqp1y9FaO67+bvN729Fa67rtbFaqH94EbMiGi97w/7me/Vlz4JI8AAAAAElFTkSuQmCC” alt=”” />
注意：
目前，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循环
$.ajax({
url : "ceshi.json",
type : "POST",
dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text， 因为测试， json文件格式正确书写
success: function(data) {
var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
var arr1 = dataJson.first;
var arr2 = dataJson.second;
//一栏显示 用for循环完成数组解析
for(var i = 0; i<arr1.length; i++){
for(var j = 0; j<arr2.length; j++){
var str='<div style="display:block">'+
'<div>姓名：'+arr1[i].name+' 性别：'+arr1[i].sex+'</div>'+
'<div>学校:'+arr2[j].name+'</div>'+
'<div>地点:'+arr2[j].area+'</div>'+
//'<div>喜好:'+arr1[i].like+'</div>'+ //全显示
//'<div>喜好:'+arr1[i].like[1]+'</div>'+ //单独设置
//'<div>喜好:'+arr1[i].like[0]+'</div>'+
'</div>';
} $(".result").append(str); } //分层显示
//var str = "";
// var str1 = "";
// if (arr1 != null) {
// for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值
// str += "<span>" + arr1[i].name + "</span><span>" + arr1[i].sex + "</span><br>";
// }
// $(".result").html(str);
// }
// if (arr2 != null) {
// for (var j = 0; j < arr2.length; j++) {
// str1 += "<span>" + arr2[j].name + "</span><span>" + arr2[j].area+ "</span><br>";
// }
// $(".result2").html(str1);
// }
},
error:function(data){
alert("error");
}
})
<div class="result">frist:</div>
<div class="result2">second:</div>
for
2、 each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中
JSON:
[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"},
]
$.ajax({
url : "ceshi.json",
type : "POST",
dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text， 因为测试， json文件格式正确书写
success: function(data) {
var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象 //each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中 i 表示索引 item 信息值 对象
$.each(dataJson,function(i,item){
var str='<div style="display:block">'+
'<div>姓名：'+item.name+' 性别：'+item.sex+'</div>'+
'<div>like:'+item.like+'</div>'+
'</div>';
$(".result").append(str);
}) },
error:function(data){
alert("error");
}
}) <div class="result"></div>
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元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title></title>
<link rel="stylesheet" href="/css/new.css" rel="external nofollow" >
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div class="result">
<div class="c-apply-one"></div>
</div>
<script type="text/javascript">
/*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 ={
"rtnInfo": [
{
"appCode": "app1",
"appDesc": "a3",
"appIconUrl": "a2",
"appName": "app1",
"contractUrl": "a4",
"id": 0,
"specUrl": "a1",
"states": [
{
"applyId": 1,
"attrName": "apply1",
"attrValue": "sdfsd",
"dispOrder": 1,
"elems": [
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "5",
"elemName": "legaperson",
"id": 0,
"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>",
"inputOrder": 1,
"inputType": "option",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "6",
"elemName": "ore",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "n",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "7",
"elemName": "hs",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "9",
"elemName": "type",
"id": 0,
"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",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "n",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "server",
"elemName": "服务组合",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
}, {
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "plan",
"elemName": "套餐",
"id": 0,
"inputOption": "<textarea rows='10'>套餐1：nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "title",
"elemName": "发票头",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "taxpayer",
"elemName": "是否为纳税人",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
}
],
"groupType": "f",
"id": 0,
"isAttach": "0"
},
{
"applyId": 1,
"attrName": "apply1",
"attrValue": "sdfsd",
"dispOrder": 1,
"elems": [
{
"appCode": "",
"belongToState": "u",
"className": "",
"elemId": "3",
"elemName": "repassword",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "password",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "u",
"className": "",
"elemId": "4",
"elemName": "email",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": " /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/"
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "server",
"elemName": "服务组合",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "plan",
"elemName": "套餐",
"id": 0,
"inputOption": "<textarea rows='10'>套餐1：nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "title",
"elemName": "发票头",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "taxpayer",
"elemName": "是否为纳税人",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
}, ],
"groupType": "b",
"id": 0,
"isAttach": "0"
},
{
"applyId": 1,
"attrName": "apply1",
"attrValue": "sdfsd",
"dispOrder": 1,
"elems": [
{
"appCode": "",
"belongToState": "u",
"className": "",
"elemId": "1",
"elemName": "phone",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": "^1[3|4|5|8][0-9]d{4,8}$"
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "5",
"elemName": "legaperson",
"id": 0,
"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>",
"inputOrder": 1,
"inputType": "option",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "8",
"elemName": "customs",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "9",
"elemName": "type",
"id": 0,
"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",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "n",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "server",
"elemName": "服务组合",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "taxpayer",
"elemName": "是否为纳税人",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "bank",
"elemName": "开户行",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
}
],
"groupType": "s",
"id": 0,
"isAttach": "0"
},
{ "applyId": 1,
"attrName": "apply1",
"attrValue": "sdfsd",
"dispOrder": 1,
"elems": [
{
"appCode": "",
"belongToState": "u",
"className": "",
"elemId": "1",
"elemName": "phone1",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": "^1[3|4|5|8][0-9]d{4,8}$"
}, {
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "5",
"elemName": "legaperson5",
"id": 0,
"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>",
"inputOrder": 1,
"inputType": "option",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "6",
"elemName": "ore6",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "n",
"maxLength": 0,
"validationRegex": ""
}, {
"appCode": "",
"belongToState": "b",
"className": "",
"elemId": "9",
"elemName": "type9",
"id": 0,
"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",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "n",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "server",
"elemName": "服务组合10",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>服务1nt<input type='radio' name='radio1'/>服务2nt<input type='radio' name='radio1'/>服务3",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "s",
"className": "",
"elemId": "plan",
"elemName": "套餐11",
"id": 0,
"inputOption": "<textarea rows='10'>套餐1：nt1、功能1nt2、功能1nt3、功能1nt</textarea>",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "title",
"elemName": "发票头12",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "taxpayer",
"elemName": "是否为纳税人13",
"id": 0,
"inputOption": "<input type='radio' name='radio1'/>是nt<input type='radio' name='radio1'/>否",
"inputOrder": 1,
"inputType": 'radio',
"isRequired": "y",
"maxLength": 0,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "bank",
"elemName": "开户行14",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "accountNumber",
"elemName": "账号15",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
},
{
"appCode": "",
"belongToState": "f",
"className": "",
"elemId": "address",
"elemName": "注册地址16",
"id": 0,
"inputOption": "",
"inputOrder": 1,
"inputType": "text",
"isRequired": "y",
"maxLength": 20,
"validationRegex": ""
}
],
"groupType": "u",
}
]
}
],
"errInfo": "",
"errorCode": "",
"rtnFlag": "T"
}
for(var i=0; i<ceshi.rtnInfo[0].states.length; i++){
// alert(ceshi.rtnInfo[0].states[i].grouptype);
var page01="";
var dataBase = ceshi.rtnInfo[0].states[i];
if(dataBase.groupType=="u"){
for(var b=0; b<dataBase.elems.length; b++){
//alert(dataBase.elems[b].elemName);
//page02 += '<label for="" class="">'+dataBase.elems[b].elemName+'：</label>';
page01 +='<div class="form-group">'+
'<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">'+dataBase.elems[b].elemName+'：</label>'+
'<div class="pull-left">'+
'<input type="'+dataBase.elems[b].inputType+'" class="input-control put-width440 '+dataBase.elems[b].elemId+'" name="'+dataBase.elems[b].elemId+'" placeholder="" value="">'+
'</div>'+
//'<div class="pull-left">'+dataBase[b].inputOption+'</div>'+
'</div>'; }
// alert(page01);
$(".result").html(page01);
}
} </script>
</body>
</html>
其他 ，如果从后台读取的json 年份：{“year”:116}, 如果想要显示正常的年份 可以用 1900+116 =2016 从1900算 + 返回的 = 现在的年份（其他方法更好，）
Jsonp：:
或者创建script
写了这么多， 希望对你有帮助，如有失误 一起讨论，一起进步！！ ☺
借鉴来源：http://www.jb51.net/article/40842.htm
