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>

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= {
"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

写了这么多，希望对你有帮助，如有失误一起讨论，一起进步！！ ☺

借鉴来源：http://www.jb51.net/article/40842.htm

posted @ 2016-10-25 10:33 danran68 阅读(32098) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

淡然一笑

Json对象和字符串互相转换数据拼接 JSON使用方式

公告

淡然一笑

Json对象和字符串互相转换 数据拼接 JSON使用方式

公告

Json对象和字符串互相转换数据拼接 JSON使用方式