Question

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

名称型号年

福特。 RTT。 2013

道奇。 ABC。 2014

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

我已经使用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 url我希望它从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

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

1 个答案: