jquery读取并显示xml内容

jquery读取并显示xml内容

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery读取并显示xml内容</title>
<script src="http://ajax.googleapis.com/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:图书列表加载失败!&nbsp;&nbsp;&nbsp;&nbsp;<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('图书列表加载成功!共加载了&nbsp;'+$('body #book').size()+'&nbsp;本图书&nbsp;&nbsp;&nbsp;&nbsp;<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>

yulan

分享到:
标签:XML,XML读取,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

jquery读取并显示xml内容:目前有1 条留言

  1. 博主厉害,膜拜!

    2014-03-21 上午 9:57