JQUERY 解析 XML

1、要解析的xml文件booklist.xml
Java代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <booklist>  
  3.     <book isbn='b001'>  
  4.         <name>java</name>  
  5.         <author>Gaosilin</author>  
  6.     </book>  
  7.     <book isbn='b002'>  
  8.         <name>Python</name>  
  9.         <author>卡卡</author>  
  10.     </book>  
  11. </booklist>  


2、解析并显示的html
Java代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>Jquery解析xml</title>  
  6.         <script src="jquery.js"></script>  
  7.         <script type="text/javascript">  
  8.             loadbook();  
  9.               
  10.             function loadbook(){  
  11.                 //使用Ajax方式加载后再处理  
  12.                 $.ajax({  
  13.                     type:'GET',  
  14.                     url:'booklist.xml',  
  15.                     dataType:'xml',//注意处理信息的类型为xml,默认为html  
  16.                     success:function(docxml){  
  17.                         //查找并迭代<book>节点  
  18.                         $(docxml).find('book').each(function(){  
  19.                             var isbn = $(this).attr('isbn');//获取节点属性  
  20.                             var bookname = $(this).children('name').text();//获取子节点的文本值  
  21.                             var author = $(this).children('author').text();  
  22.                               
  23.                             //构造节点  
  24.                             var bookdiv = '<div><li>ISBN:'+isbn+'</li><li>书名:'+bookname+'</li><li>作者:'+author+'</li><div><br>';  
  25.                             $('#listdiv').append(bookdiv);  
  26.                         })  
  27.                     }  
  28.                 });  
  29.             }  
  30.         </script>  
  31.     </head>  
  32.     <body>  
  33.         <div id="listdiv">  
  34.               
  35.         </div>  
  36.     </body>  
  37. </html>  


3、结果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值