jquery - 如何读取和显示HTML页面中的XML内容？

Question

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

命名车型年份

福特。 RTT。 2013

闪避。美国广播公司。 2014

现在我有另一个网站，我想在 HTML 中以不同的自定义外观显示内容。因此，每当提要更新时，我页面中的内容也会更新。如何在 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 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>

现在你必须在 body 有
的 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