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

Question

我正在使用 Ajax/jQuery 从 RSS 提要中提取一些内容，但它似乎无法读取名称为“链接”的 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();

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

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

Answer 1

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

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

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

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 组合。我建议和其中一个一起去。因此，这里是一个包含 AJAX 请求的完整 jQuery 实现:

$.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...
  }
});