我的代码中缺少什么?Javascript和XML

What am I missing in my code? Javascript and XML

本文关键字：Javascript XML 什么 代码 我的      更新时间：2023-09-26

我是XML、html和javascript的初学者。我写了一些代码来获取和连接html中的所有标题元素，但我无法以我想要的方式显示输出。有人能看看我的代码并给我一些关于如何修复代码的提示吗？提前感谢您的帮助。

当前：结果：我想去的城市东京，日本圣托尼，格里斯芝加哥，美国

我想要一个看起来像的东西

  • 结果：
  • 我想去的城市
  • 日本东京
  • 希腊圣托里尼
  • 美国芝加哥

这是XML文件：

<?xml version="1.0"?>
<rss version="0.92">
  <channel>
      <title>Cities I Want to Visit</title>
      <link>http://pinterest.com/manicmonster/cities-i-want-to-visit</link>
      <Description>I love traveling!</Description>
      <item>
          <title>Tokyo, Japan</title>
          <link>http://www.gotokyo.org/en</link>
      </item>
      <item>
          <title>Santorini, Greece</title>
          <link>http://www.visitgreece.gr/en/greek_islands/santorini</link>
      </item>
      <item>
          <title>Chicago, USA</title>
          <link>http://www.cityofchicago.org/city/en.html</link>
      </item>
      <item>
          <title>Rome, Italy</title>
          <link>http://www.turismoroma.it/?lang=en</link>
      </item>
  </channel>
</rss>

这是html文件：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <title>Practice</title>
  <meta charset="UTF-8">  
</head>
  <body>
    <div id="clickme" onclick="startAjax()">Click me</div>
    <script>
        function startAjax(){
          $("#clickme").text("Calling server");
          $.ajax({url:"test.xml",       
          success:callbackFunction, error:errorFunction});
        }
        function callbackFunction(data,info){
          var titles = $(data).find("title:first");
          var items = $(data).find("item title");
          if (titles && titles.length)
            $("#clickme").text("result: " + titles.text() + " " + items.text());
          else
            errorFunction(data, "No titles");
          }
        function errorFunction(data,info){
          $("#clickme").text("error occurred:"+info);
        }
    </script>
  </body>
</html>

function callbackFunction(data,info){
  var titles = $(data).find("title:first"),
      items = $(data).find("item").reverse(),
      items_idx = items.length,
      html= "";
  while (items_idx--){
      var txt = items[items_idx].find("title").text(),
          url = items[items_idx].find("link").text();
      html += "<li><a href='" + url + "'>" + txt + "</a></li>";
  }
  if (titles && titles.length)
    $("#clickme").text("result: " + titles.text() + " <ul>" + html + "</ul>");
  else
    errorFunction(data, "No titles");
}

var items = $(data).find("item title");

此行获取xml节点的集合。稍后，当您的代码执行以下行时：

items.text()

它获取集合并返回逗号分隔的值字符串。（例如东京、日本圣托里尼、格里斯芝加哥、美国罗马、意大利）

正如Malk所暗示的，您需要使用一个循环来获取每个单独的值，并将它们添加到列表中。您可以使用该示例，或者在您的集合上使用jQuery each方法

html = "";
items.each(function(index, value) { 
   html += "<li>" + value + "</li>";
});

当然，假设你想要一个项目符号列表。但这个想法是正确的，迭代整个集合似乎更接近你想要的。

相关文章：