使用 Javascript 访问 XML 中的 <link> 值

Question

我正在使用 Ajax/jQuery 从 RSS 提要中提取一些内容，但它似乎无法读取名称为 'link' 的 XML 节点的内容.

这是 XML 的简化版本：

<?xml version="1.0" encoding="UTF-8"?>
  <channel>
    <item>
      <title>Title one</title>
      <link>https://example.com/</link>
      <pubDate>Mon, 12 Feb 2019</pubDate>
    </item>
    <item>...</item>
    <item>...</item>
  </channel>
</xml>

我使用的代码：

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         $('item', this.responseText).each(function(){
             var thisPostData = {};
             thisPostData.title = $(this).find('title').text();
             thisPostData.link = $(this).find('link').text();
             thisPostData.date = $(this).find('pubDate').text();
             posts.push(thisPostData);
          });
          console.log(posts);
       }
     };
   var posts = [];
   xhttp.open('GET', 'https://example.com/rssfeed/', true);
   xhttp.send();

您会看到我正在尝试将每个 'item' 添加到一个对象，并将它们存储在 'posts' 数组中。 'Title' 和 'pubDate' 存储正常但 'link' 不是。

有问题的实际 RSS 提要包含大量额外数据，除了 'link' 节点外，我可以阅读所有这些数据。为什么称为 'link' 的节点与其他所有节点的行为不同，有什么建议吗？

Answer 1

问题是因为您试图将 XML 解析为 HTML。 HTML 中的 <link> 对象是内联元素，而不是块级元素，因此它没有 textContent 属性供 jQuery 读取，因此输出是空的。

要解决此问题，请先使用 $.parseXML()、 阅读 XML，然后 将其放入可以遍历的 jQuery 对象中。

还有几点需要注意。首先，您需要删除 XML 输出末尾的 </xml> 节点，因为它无效，并且会在运行到 $.parseXML 时导致错误。其次，您可以使用 map() 来构建一个数组，而不是在数组上手动调用 push()，并且您可以直接从中 return 对象定义。试试这个：

var responseText = '<?xml version="1.0" encoding="UTF-8"?><channel><item><title>Title one</title><link>https://example.com/</link><pubDate>Mon, 12 Feb 2019</pubDate></item><item><title>Title two</title><link>https://foo.com/</link><pubDate>Tue, 13 Feb 2019</pubDate></item></channel>';

var xmlDoc = $.parseXML(responseText)
var posts = $('item', xmlDoc).map(function() {
  var $item = $(this);
  return {
    title: $item.find('title').text(),
    link: $item.find('link').text(),
    date: $item.find('pubDate').text()
  };
}).get();

console.log(posts);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最后，您使用了 JS 和 jQuery 的相当奇怪的组合。我建议和其中一个一起去。因此，这里有一个完整的 jQuery 实现，其中也包含 AJAX 请求：

$.ajax({
  url: 'https://example.com/rssfeed/',
  success: function(responseText) {
    var xmlDoc = $.parseXML(responseText)
    var posts = $('item', xmlDoc).map(function() {
      var $item = $(this);
      return {
        title: $item.find('title').text(),
        link: $item.find('link').text(),
        date: $item.find('pubDate').text()
      };
    }).get();
    
    // work with posts here...
  }
});

使用 Javascript 访问 XML 中的 <link> 值

Access <link> value in XML with Javascript

javascript

xml

ajax

rss

jquery