夏日博客

A-A+

jquery读取并显示xml内容的例子

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

jquery读取并显示xml是我们在做一个百度地址是用到了，虽然下面例子不是百度地图的例子，但多少有一些关系了，下面一起来看看我整理了两个例子。

HTML部分代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jquery读取并显示xml内容</title>  
  6. <script src="/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
  7. </head>  
  8. <body>  
  9. <div id="error"></div>  
  10. </body>  
  11. </html>  

CSS样式代码如下:

  1. <style>  
  2. #body { margin:0; padding:0; padding-top:10px; }  
  3. #book { width:98%; height:auto; margin:0 auto; font-size:12px; text-indent:10px; color:#333; line-height:20px; border-bottom:solid 1px #ccc; padding-bottom:10px; margin-bottom:10px; }  
  4. #book .price { font-family:"微软雅黑"; font-size:14px; font-weight:900; color:#f00; }  
  5. #error { width:98%; height:36px; line-height:36px; margin:0 auto; margin-bottom:10px; color:#fff; font-size:12px; text-align:left; text-indent:20px; background:#f60; display:none; }  
  6. #error a { text-decoration:none; color:#fff; }  
  7. #error a:hover { text-decoration:underline; }  
  8. </style>  

JS部分代码如下:

  1. <script>  
  2. //在页面加载完成时加载以下内容  
  3. $(window).load(function() {  
  4.     loadxml();  
  5. });  
  6. var  
  7.     bid,  
  8.     btitle,  
  9.     bname,  
  10.     bdescription,  
  11.     bprice,  
  12.     btime,  
  13.     html;  
  14. //加载并显示xml元素内容  
  15. function loadxml() {  
  16.     $('#error').text('正在加载图书内容，请稍等...').show();  
  17.     $.ajax({  
  18.         url : 'book.xml',  
  19.         cache:false,  
  20.         dataType:"xml",  
  21.         type:'GET',  
  22.         timeout:4000,  
  23.         error:function(data) {  
  24.         $('#error').html('Error：图书列表加载失败！&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="loadxml();">点击重新加载</a>');  
  25.     },  
  26.     success: function(data) {  
  27.          $('body #book').remove();  
  28.          $(data).find('bs').each(function(i) {  
  29.          bid = $(this).attr('id');                                //用attr方法取得bs元素ID  
  30.          btitle = $(this).children('title').text();                //用children方法取得当前元素的子元素内容  
  31.          bname = $(this).children('name').text();  
  32.          bdescription = $(this).children('description').text();  
  33.          bprice = $(this).children('price').text();  
  34.          btime = $(this).children('time').text();  
  35.          html = '<div id="book" style="display:none;">'  
  36.                       +'<div>编号：'+bid+'</div>'  
  37.                       +'<div>标题：'+btitle+'</div>'  
  38.                       +'<div>作者：'+bname+'</div>'  
  39.                       +'<div>简介：'+bdescription+'</div>'  
  40.                       +'<div>价格：￥'+bprice+'</div>'  
  41.                       +'<div>时间：'+btime+'</div>'  
  42.                 +'</div>';  
  43.          $('body').append(html);                                    //将内容追加到body  
  44.          $('body #book').slideDown('fast');                        //滑动下拉效果显示  
  45.      });  
  46.      $('#error').html('图书列表加载成功！共加载了&nbsp;'+$('body #book').size()+'&nbsp;本图书&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="loadxml();">点击重新加载</a>');  
  47.     }  
  48. });  
  49. }  
  50. </script>  

XML部分代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE note SYSTEM "Note.dtd">  
  3. <b:book xmlns:b="http://localhost">  
  4.      <bs id="1">  
  5.           <title>钢铁是怎样炼成的</title>  
  6.           <name>尼古拉·奥斯特洛夫斯基</name>  
  7.           <description>《钢铁是怎样炼成的》是前苏联作家尼古拉·奥斯特洛夫斯基所著的一部长篇小说... </description>  
  8.           <price>39.9</price>  
  9.           <time>2012-03-20</time>  
  10.      </bs>  
  11.      <bs id="2">  
  12.           <title>2015新编考研英语阅读理解150篇</title>  
  13.           <name>曾鸣，张剑，刘晓英 著 王兰花 校</name>  
  14.           <description>张剑，博士，毕业于英国格拉斯哥大学英国文学系，北京外国语大学英语学院教授、英语学院副院长...</description>  
  15.           <price>31.30</price>  
  16.           <time>2012-03-15</time>  
  17.      </bs>  
  18.      <bs id="3">  
  19.           <title>文化苦旅（新版）（附赠墨宝版)</title>  
  20.           <name>余秋雨</name>  
  21.           <description>文化苦旅》一书于1992年首次出版，是余秋雨先生1980年代在海内外讲学和考察途中写下的作品...</description>  
  22.           <price>27.60</price>  
  23.           <time>2012-03-17</time>  
  24.      </bs>  
  25.      <bs id="4">  
  26.           <title>龙应台感动亲情作品系列（套装共3册）</title>  
  27.           <name>龙应台，安德烈</name>  
  28.           <description>十五年前龙应台以一位母亲的亲身经验写下《孩子你慢慢来》...</description>  
  29.           <price>63.50</price>  
  30.           <time>2012-03-16</time>  
  31.      </bs>  
  32.      <bs id="5">  
  33.           <title>伟人百传 影响世界的伟大人物 大32开20卷</title>  
  34.           <name>译心图书专营店</name>  
  35.           <description>每一位具有世界影响的伟大人物，都蕴藏着一部感人至深的故事。他们的丰富阅历和人生体验...</description>  
  36.           <price>355.00</price>  
  37.           <time>2012-03-19</time>  
  38.      </bs>  
  39. </b:book>  

在实例应用中ajax读取xml会比较常用，下面我们也来看个例子,首先建立一个XML文档,名字随便取就可以了.这里我就用test.xml给大家做示范了.XML内容为:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <stulist>  
  3. <man>  
  4.    <name>爱的色放</name>  
  5.    <age>36</age>  
  6. </man>  
  7. <man>  
  8.    <name>X特警</name>  
  9.    <age>24</age>  
  10. </man>  
  11. <man>  
  12.    <name>大头儿子小头爸爸</name>  
  13.    <age>12</age>  
  14. </man>  
  15. </stulist>  

好了这样就算是一个比较完整的XML文档了.下面就看我们要写的JS.既然是jQuery最重要的就是要将jQuery库引入进来.没有 jQuery的朋友可去jquery.com下载最新版本.这里就以我本机的路径为例.

  1. <script language="javascript" type="text/javascript" src="../JavaScript/jquery-1.3.2.min.js"></script>  

接下来就是读取XML文件了.前面我们已经说过了要用ajax所以这里代码就应该是这样:

  1.   <script>  
  2. $(document).ready(function(){  
  3.     $.ajax({url:"test.xml",dataType:"xml",success:function(xml){  
  4.       $(xml).find("stulist>man").each(function(){  
  5.    document.getElementById("acc").innerHTML+="<br>姓名:"+$(this).find("name").text()+"<br/>年龄:"+$(this).find("age").text();  
  6.       });  
  7.     }});  
  8.     })  
  9. </script>  

第一句就不用跟大家解释了,意思就是页面加载执行.我们也可以写在一个函数里.

$ajax()有很多参数,这里就只给大家介绍我写的这几个参数是什么意思.

参数1 url:要请求的文档路径.

参数2 dataType:请求的文档类型.有 XML HTML script json等等.

参数3 success:请求成功后的回调函数。也就是说,当你发送的请求成功之后你要做什么.

接下来我给大家解释一下这段代码

function(xml) function相信大家都知道是干什么的,这里的xml指的是你请求文件完成后返回的所有数据.

$(xml).find("stulist>man").each这句的意思就是查找返回的xml里的stulist节点下的man标签.然后根据查找到的结果,每一个跟查找结果匹配的元素都执行下文的函数.

下边就更好理解了,然后在你查找到的结果里,继续查找你想要的元素,然后将你得到的值,一个个inner到需要显示的元素里.OK就这样,我们读取XML就成功了.

标签：

给我留言