您的位置：首页 > Web前端 > JQuery

JQuery 轻松解析XML /Json

2015-06-19 15:10 701 查看
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+"    "+name+"    "+author+"    "+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);

})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航