如何使用 Javascript 解析 Blogger Rss 提要并在 HTML 页面上获取输出？

Question

我想从 RSS Link 下方解析我的博主提要 https://www.universalmanual.com/feeds/posts/default?alt=rss。 https://www.universalmanual.com/feeds/posts/default/-/[label]?alt=rss

。我想在计划 HTML 页面上显示已解析的数据。有什么方法可以使用 javascript 提取数据吗？ Usign JSON 我会得到标题、作者姓名和摘要，但无法得到图片，如何在下面的代码中添加图片

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postimage = json.feed.entry[i].media$thumbnail.url;
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><img src=' + postimage + '><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=500&alt=json-in-script&callback=mycallback"></script>

Answer 1

为什么不使用博主 JSON 提要，它比 XML 提要轻量级（用于 Atom 和 RSS）您可以使用 ?alt=json 参数访问 json像这样喂食

https://www.universalmanual.com/feeds/posts/default?alt=json

要使用 javascript 解析 JSON 提要，请使用 ?alt=json-in-script 以下示例显示了您博客中的最后一个 post 标题

<div id="content"></div>

<script>
    function get(json) {

        document.getElementById('content').innerHTML = "<h2>" + json.feed.entry[0].title.$t + "</h2>";
    }
</script>

<script src="https://www.universalmanual.com/feeds/posts/default?alt=json-in-script&callback=get"></script>

要在您的代码中显示 post 图片：

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s1600/');
      var item = '<div class="wrapper"><img src="' + postImage + '"/><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

如何使用 Javascript 解析 Blogger Rss 提要并在 HTML 页面上获取输出？

How To Parse Blogger Rss feed Using Javascript and get output on a HTML Page?

html

javascript

jquery

json

blogger