HTML部分
| 代码如下 | 复制代码 |
|
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery读取并显示xml内容</title> <script src="/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="error"></div> </body> </html> |
|
CSS样式
| 代码如下 | 复制代码 |
|
<style> #body { margin:0; padding:0; padding-top:10px; } #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; } #book .price { font-family:"微软雅黑"; font-size:14px; font-weight:900; color:#f00; } #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; } #error a { text-decoration:none; color:#fff; } #error a:hover { text-decoration:underline; } </style> |
|
JS部分
| 代码如下 | 复制代码 |
|
<script> //在页面加载完成时加载以下内容 $(window).load(function() { loadxml(); }); var bid, btitle, bname, bdescription, bprice, btime, html; //加载并显示xml元素内容 function loadxml() { $('#error').text('正在加载图书内容，请稍等...').show(); $.ajax({ url : 'book.xml', cache:false, dataType:"xml", type:'GET', timeout:4000, error:function(data) { $('#error').html('Error：图书列表加载失败！ <a href="javascript:;" onclick="loadxml();">点击重新加载</a>'); }, success: function(data) { $('body #book').remove(); $(data).find('bs').each(function(i) { bid = $(this).attr('id'); //用attr方法取得bs元素ID btitle = $(this).children('title').text(); //用children方法取得当前元素的子元素内容 bname = $(this).children('name').text(); bdescription = $(this).children('description').text(); bprice = $(this).children('price').text(); btime = $(this).children('time').text(); html = '<div id="book" style="display:none;">' +'<div>编号：'+bid+'</div>' +'<div>标题：'+btitle+'</div>' +'<div>作者：'+bname+'</div>' +'<div>简介：'+bdescription+'</div>' +'<div>价格：￥'+bprice+'</div>' +'<div>时间：'+btime+'</div>' +'</div>'; $('body').append(html); //将内容追加到body $('body #book').slideDown('fast'); //滑动下拉效果显示 }); $('#error').html('图书列表加载成功！共加载了 '+$('body #book').size()+' 本图书 <a href="javascript:;" onclick="loadxml();">点击重新加载</a>'); } }); } </script> |
|
XML部分
| 代码如下 | 复制代码 |
|
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE note SYSTEM "Note.dtd"> <b:book xmlns:b="http://localhost"> <bs id="1"> <title>钢铁是怎样炼成的</title> <name>尼古拉·奥斯特洛夫斯基</name> <description>《钢铁是怎样炼成的》是前苏联作家尼古拉·奥斯特洛夫斯基所著的一部长篇小说... </description> <price>39.9</price> <time>2012-03-20</time> </bs> <bs id="2"> <title>2015新编考研英语阅读理解150篇</title> <name>曾鸣，张剑，刘晓英 著 王兰花 校</name> <description>张剑，博士，毕业于英国格拉斯哥大学英国文学系，北京外国语大学英语学院教授、英语学院副院长...</description> <price>31.30</price> <time>2012-03-15</time> </bs> <bs id="3"> <title>文化苦旅（新版）（附赠墨宝版)</title> <name>余秋雨</name> <description>文化苦旅》一书于1992年首次出版，是余秋雨先生1980年代在海内外讲学和考察途中写下的作品...</description> <price>27.60</price> <time>2012-03-17</time> </bs> <bs id="4"> <title>龙应台感动亲情作品系列（套装共3册）</title> <name>龙应台，安德烈</name> <description>十五年前龙应台以一位母亲的亲身经验写下《孩子你慢慢来》...</description> <price>63.50</price> <time>2012-03-16</time> </bs> <bs id="5"> <title>伟人百传 影响世界的伟大人物 大32开20卷</title> <name>译心图书专营店</name> <description>每一位具有世界影响的伟大人物，都蕴藏着一部感人至深的故事。他们的丰富阅历和人生体验...</description> <price>355.00</price> <time>2012-03-19</time> </bs> </b:book> |
|
在实例应用中ajax读取xml会比较常用，下面我们也来看个例子
首先建立一个XML文档,名字随便取就可以了.这里我就用test.xml给大家做示范了.
XML内容为:
| 代码如下 | 复制代码 |
|
<?xml version="1.0" encoding="utf-8" ?> <stulist> <man> <name>爱的色放</name> <age>36</age> </man> <man> <name>X特警</name> <age>24</age> </man> <man> <name>大头儿子小头爸爸</name> <age>12</age> </man> </stulist> |
|
好了这样就算是一个比较完整的XML文档了.
下面就看我们要写的JS.
既然是jQuery最重要的就是要将jQuery库引入进来.
没有 jQuery的朋友可去jquery.com下载最新版本.这里就以我本机的路径为例.
<script language="javascript" type="text/javascript" src="../JavaScript/jquery-1.3.2.min.js"></script>
接下来就是读取XML文件了.前面我们已经说过了要用ajax所以这里代码就应该是这样:
| 代码如下 | 复制代码 |
|
<script> $(document).ready(function(){ $.ajax({url:"test.xml",dataType:"xml",success:function(xml){ $(xml).find("stulist>man").each(function(){ document.getElementById("acc").innerHTML+="<br>姓名:"+$(this).find("name").text()+"<br/>年龄:"+$(this).find("age").text(); }); }}); }) </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就成功了.
时间： 2024-10-29 06:46:42