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

【问题标题】：Access <link> value in XML with Javascript使用 Javascript 访问 XML 中的 <link> 值
【发布时间】：2019-06-29 09:21:59
【问题描述】：

我正在使用 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 提要包含大量额外数据，除了“链接”节点之外，我可以阅读所有这些数据。有什么建议为什么称为“链接”的节点会与所有其他节点的行为不同？

【问题讨论】：

标签： javascript jquery ajax xml rss

【解决方案1】：

问题是因为您试图将 XML 解析为 HTML。 HTML 中的 <link> 对象是一个内联元素，而不是块级元素，因此它没有 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);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

最后，您正在使用 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...
  }
});

【讨论】：