JQuery 轻松解析XML /Json

xml文件结构:books.xml

<? xml version="1.0" encoding="UTF-8" ?>
< root >
    
< book  id ="1" >
        
< name > 深入浅出extjs </ name >
        
< author > 张三 </ author >
        
< price > 88 </ price >
    
</ book >
    
< book  id ="2" >
        
< name > 锋利的jQuery </ name >
        
< author > 李四 </ author >
        
< price > 99 </ price >
    
</ book >
    
< book  id ="3" >
        
< name > 深入浅出flex </ name >
        
< author > 王五 </ author >
        
< price > 108 </ price >
    
</ book >
    
< book  id ="4" >
        
< name > java编程思想 </ name >
        
< author > 钱七 </ author >
        
< price > 128 </ price >
    
</ book >
</ root >
页面代码:
<! 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 > jquery解析xml </ title >
< script  type ="text/javascript"  src ="js/jquery-1.4.2.min.js" ></ script >
< script  type ="text/javascript" >
    $(
function(){
        $.post('books.xml',
function(data){
            
//查找所有的book节点
            var s="";
            $(data).find('book').each(
function(i){
                
var id=$(this).attr('id');
                
var name=$(this).children('name').text();
                
var author=$(this).children('author').text();
                
var price=$(this).children('price').text();
                s
+=id+"&nbsp;&nbsp;&nbsp;&nbsp;"+name+"&nbsp;&nbsp;&nbsp;&nbsp;"+author+"&nbsp;&nbsp;&nbsp;&nbsp;"+price+"<br>";
            }
);
            $('#mydiv').html(s);
        }
);
    }
);
</ script >
</ head >
< body >
    
< div  id ='mydiv' ></ div >
</ body >
</ html >


Json 数据 



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:'商洛市'} 
]
}";

   


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


2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:


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);
})








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值