jquery解析json

最新推荐文章于 2013-11-18 11:20:09 发布

指尖上的程序

最新推荐文章于 2013-11-18 11:20:09 发布

阅读量253

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/xiaoxing1521025/article/details/8116220

版权

JQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

    Js代码   
    
  
 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代码   
    
  
 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代码   
    
  
 [   
 {   
 "name":"xujun",   
 "sex":"男",   
 "home":"nanjing"   
 },   
 {   
 "name":"jack",   
 "sex":"男",   
 "home":"beijing"   
 }   
 ]   

Html文件：

    Html代码   
    
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
 <html>   
 <head>   
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
 <title>Insert title here</title>   
 <script src="../jquery.js"></script>   
 <script>   
 $(document).ready(function(){   
 $.getJSON('jsonData.json?id',function(data){   
 //遍历JSON中的每个entry   
   
 $.each(data,function(entryIndex,entry){   
 var html='<tr>';   
 html+='<td>'+entry['name']+'</td>';   
 html+='<td>'+entry['sex']+'</td>';   
 html+='<td>'+entry['home']+'</td>';   
 html+='</tr>';   
 $('#title').after(html);   
   
 });   
 });   
 });   
 </script>   
 </head>   
 <body>   
 <table>   
 <tr id="title">   
 <th>姓名</th>   
 <th>性别</th>   
 <th>家庭地址</th>   
 </tr>   
 </table>   
 </body>   
 </html> 

指尖上的程序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery解析json

Js代码 var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'},
复制链接

扫一扫