如何根据HTML中的“id”从XML中检索特定值

时间:2012-11-01 21:56:57

标签: html xml

我正在使用两页。

  • HTML文件:24.html
  • XML文件:itemdata.xml

如何从id =“24”的项目中检索数据?此时它会抓取所有项目及其信息,并在HTML页面上显示每个项目。

HTML文件:“24.html”

`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Item 24 - Kermit Frog</title>

    <script type="text/javascript">

    $(document).ready(function()
      {
        $.get('itemdata.xml', function(d){
        $('body').append('<h1> My Item Directory</h1>');
        $('body').append('<dl />');

        $(d).find('item').each(function(){

            var $item = $(this); 
            var title = $item.attr("title");
            var price = $item.find('price').text();
            var imageurl = $item.attr('imageurl');
            var status = $item.attr('status');
            var src = $item.find('src').text();
            var color = $item.find('color').text();
            var size = $item.find('size').text();

            var html = '<dt> <img class="itemImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<p class="title">' + title + ' <span class="status"> ' +status + ' </span></p>';
            html += '<p> ' + size + '</p>' ;
            html += '<p> Valued at: $' + price + '</p>' ;
            html += '<p><a href=" ' + src + ' " target="_blank">More Info</a></p>' ;
            html += '</dd>';

            $('dl').append($(html));

            $('.loadingPic').fadeOut(1400);
        });
    });
});
    </script>

</head>
<body>
</body>
</html>

`

XML FILE:“itemdata.xml”

`

<?xml version="1.0" encoding="utf-8" ?>
    <items>
    <item title="Teddy Bear" imageurl="http://www.website.com/images/tan.png" status="New" id="10">
        <price>49</price>
        <src>http://www.website.com/10.html</src>
        <color>tan</color>
        <size>medium</size>
        </item>
        <item title="Kermit Frog" imageurl="http://www.website.com/images/frog.png" status="Like New" id="24">
        <price>5</price>
        <src>http://www.website.com/24.html</src>
        <color>green</color>
        <size>small</size>
        </item>
        <item title="Superman Action Figure" imageurl="http://www.website.com/images/superman.png" status="Antique" id="5">
        <price>35</price>
        <src>http://www.website.com/5.html</src>
        <color>Red &amp; Blue</color>
        <size>large</size>
        </item>
     </items>

`

我也愿意将关于特定项目的数据加载到新窗口/页面中,同时当前显示所有内容。即:一个链接将一个项目的数据召唤到一个新的/当前窗口。

如果您希望我举办示例网站 - &gt;我可以用上面的例子做到这一点。

谢谢,

0 个答案:

没有答案
相关问题