• 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>   
  • 相关阅读:
    (转) 理解Angular中的$apply()以及$digest()
    Gulp 有用的地址
    AngularJS中Directive指令系列
    让博客园博客中的图片支持fancybox浏览
    Drupal7 实现like(点赞)功能
    Drupal7 针对特定条件才显示区块
    Windows server 2008 tomcat间歇性掉线关闭
    关于tomcat8在windows2008下高并发下有关问题的解决方案
    combotree 的简单使用2
    @responseBody 返回更多数据
  • 原文地址：https://www.cnblogs.com/lijinchang/p/2211128.html
Copyright © 2020-2023  润新知