如何在HTML页面中阅读和显示XML内容？

Question

我有一个来自网站的XML RSS提要.提要的内容如下所示.

姓名模特年

福特.RTT.2013

躲闪.ABC.2014

现在我有了另一个网站,我想在HTML中以不同的自定义外观显示内容.因此,在更新Feed时,我的页面中的内容也将更新.如何在HTML中实现这一点.网站如下面的屏幕截图所示

http://imgur.com/h0XCkWo

我已经使用jquery mobile进行此列表显示.源代码相同

<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-hc.jpg">
    <h2>Warning</h2>
    <p>Hot Chip</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-p.jpg">
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>
    </li>
</ul>

现在,而不是标题和子标题和图像url和href网址,我想从xml rss动态. 我如何编码相同.帮助我学习

之后我想要实现的是当用户点击任何一个列表时,需要再次从rss中提取并显示汽车的相应详细信息.

我找到了这个w3school链接,但当我尝试在之间添加相同的代码时.显示没有. http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

Answer 1

假设您在sample.xml中有以下XML内容

<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
  <items>
    <item>
      <title>Lorem</title>
      <description>Lorem Ipsum</description>
      <link>http://lorempixel.com/100/100/people/</link>
      <image>http://lorempixel.com/100/100/people/</image>
    </item>
    <item>
      <title>dolor sit amet</title>
      <description>consectetur adipisicing elit, sed do eiusmod</description>
      <link>http://lorempixel.com/100/100/food/</link>
      <image>http://lorempixel.com/100/100/food/</image>
    </item>
    <item>
      <title>tempor incididunt</title>
      <description>ut labore et dolore magna aliqua.</description>
      <link>http://lorempixel.com/100/100/city/</link>
      <image>http://lorempixel.com/100/100/city/</image>
    </item>    
  </items>
</rss>

现在你必须在它的正文的HTML页面上显示它
<div id="main"></div>

然后使用jQuery,你可以解析并在这样的html中显示它

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "sample.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml)
{
  $("#main").html("<ul id='content' data-role='listview' data-inset='true'></ul>");
  $(xml).find("item").each(function()
  {
    $("#content").append("<li><a href='"+$(this).find("link").text()+"'><img src='"+$(this).find("image").text()+"'/><h2>"+$(this).find("title").text()+"</h2><p>"+$(this).find("title").text()+"</p></a></li>");
  });  
}

如果您更愿意使用javascript而不是jQuery,那么试试这个

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML; 
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
  {     
    document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
  }
document.write("</ul>");

要查看此演示,请参阅这两个链接

http://alokation.com/temp/ParseXML/ParseXMLwithJS.html http://alokation.com/temp/ParseXML/ParseXMLwithjQuery.html

xml文件位于 http://alokation.com/temp/ParseXML/sample.xml