lijinchang

导航

jquery解析json

Js代码 复制代码 收藏代码
  1. var data="    
  2. {    
  3. root:    
  4. [    
  5. {name:'1',value:'0'},    
  6. {name:'6101',value:'西安市'},    
  7. {name:'6102',value:'铜川市'},    
  8. {name:'6103',value:'宝鸡市'},    
  9. {name:'6104',value:'咸阳市'},    
  10. {name:'6105',value:'渭南市'},    
  11. {name:'6106',value:'延安市'},    
  12. {name:'6107',value:'汉中市'},    
  13. {name:'6108',value:'榆林市'},    
  14. {name:'6109',value:'安康市'},    
  15. {name:'6110',value:'商洛市'}    
  16. ]    
  17. }";   
var data=" 
{ 
root: 
[ 
{name:'1',value:'0'}, 
{name:'6101',value:'西安市'}, 
{name:'6102',value:'铜川市'}, 
{name:'6103',value:'宝鸡市'}, 
{name:'6104',value:'咸阳市'}, 
{name:'6105',value:'渭南市'}, 
{name:'6106',value:'延安市'}, 
{name:'6107',value:'汉中市'}, 
{name:'6108',value:'榆林市'}, 
{name:'6109',value:'安康市'}, 
{name:'6110',value:'商洛市'} 
] 
}";



对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：

Js代码 复制代码 收藏代码
  1. var dataObj=eval("("+data+")");//转换为json对象    
  2. alert(dataObj.root.length);//输出root的子对象数量    
  3. $.each(dataObj.root,fucntion(idx,item){    
  4. if(idx==0){    
  5. return true;    
  6. }    
  7.   
  8. //输出每个root子对象的名称和值    
  9. alert("name:"+item.name+",value:"+item.value);    
  10. })   
var dataObj=eval("("+data+")");//转换为json对象 
alert(dataObj.root.length);//输出root的子对象数量 
$.each(dataObj.root,fucntion(idx,item){ 
if(idx==0){ 
return true; 
} 

//输出每个root子对象的名称和值 
alert("name:"+item.name+",value:"+item.value); 
})



注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。

JSON文件:

Js代码 复制代码 收藏代码
  1. [    
  2. {    
  3. "name":"xujun",    
  4. "sex":"男",    
  5. "home":"nanjing"    
  6. },    
  7. {    
  8. "name":"jack",    
  9. "sex":"男",    
  10. "home":"beijing"    
  11. }    
  12. ]   
[ 
{ 
"name":"xujun", 
"sex":"男", 
"home":"nanjing" 
}, 
{ 
"name":"jack", 
"sex":"男", 
"home":"beijing" 
} 
]



Html文件：

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
  2. <html>    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  5. <title>Insert title here</title>    
  6. <script src="../jquery.js"></script>    
  7. <script>    
  8. $(document).ready(function(){    
  9. $.getJSON('jsonData.json?id',function(data){    
  10. //遍历JSON中的每个entry    
  11.   
  12. $.each(data,function(entryIndex,entry){    
  13. var html='<tr>';    
  14. html+='<td>'+entry['name']+'</td>';    
  15. html+='<td>'+entry['sex']+'</td>';    
  16. html+='<td>'+entry['home']+'</td>';    
  17. html+='</tr>';    
  18. $('#title').after(html);    
  19.   
  20. });    
  21. });    
  22. });    
  23. </script>    
  24. </head>    
  25. <body>    
  26. <table>    
  27. <tr id="title">    
  28. <th>姓名</th>    
  29. <th>性别</th>    
  30. <th>家庭地址</th>    
  31. </tr>    
  32. </table>    
  33. </body>    
  34. </html>   

posted on 2011-10-14 09:05  lijinchang  阅读(251)  评论(0)  编辑  收藏  举报