本文实例讲述了使用jquery解析XML的方法,分享给大家供大家参考之用。具体方法如下:
一、xml文件结构:books.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<? 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 >
|
二、页面代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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>
|
运行效果图如下:
感兴趣的读者可以点此本站下载完整代码。
更多关于jquery xml操作相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》