本文实例讲述了使用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技巧总结》