JQuery 轻松解析XML /Json

最新推荐文章于 2023-01-05 18:20:45 发布

陈勇士

最新推荐文章于 2023-01-05 18:20:45 发布

阅读量713

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍使用jQuery解析XML文件并展示数据的方法,同时演示如何处理JSON数据,包括JSON字符串的对象化处理及数据遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xml文件结构:books.xml

<?xml version="1.0" encoding="UTF-8"?>

<root>

<name>深入浅出extjs</name>

</book>

<name>锋利的jQuery</name>

</book>

<name>深入浅出flex</name>

</book>

<name>java编程思想</name>

</book>

</root>

页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jquery解析xml</title>

$(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>

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