Question

我试图在不使用任何插件的情况下在jQuery中构建rss feed我在这里找到了一个解决方案：designshack.net它使用的Google Feed API已不再使用。我发现解决方案非常简单，但它不起作用。我正在寻找的是一个RSS提要，它使用jQuery解析来自其他博客/网站的JSON响应而没有任何插件。

还附加fiddle链接。

代码在这里：

<!doctype html>
<html lang="en-US">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html">
<title>Automated jQuery RSS Feed Demo</title>
   <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript" language="javascript" src="js/parser.js"></script>
</head>

<body>
   <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a></div>

   <div id="w">
     <div id="content">
       <h1>Automated jQuery RSS Feed Listing</h1>

       <div id="nouperss" class="feedcontainer"></div>
       <hr>

     </div><!-- @end #content -->
   </div><!-- @end #w -->
<script type="text/javascript">
$(function(){
// running custom RSS functions
 parseRSS('http://www.noupe.com/feed/', '#nouperss');

});
</script>
</body>
</html>

parser.js（jQuery）

/**
 * parses any RSS/XML feed through Google and returns JSON data
 * source: http://stackoverflow.com/a/6271906/477958
*/
function parseRSS(url, container) {
  $.ajax({
  url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
  dataType: 'json',
  success: function(data) {
  //console.log(data.responseData.feed);
      $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>');

  $.each(data.responseData.feed.entries, function(key, value){
    var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>';
    $(container).append(thehtml);
      });
     }
  });
}

/**
 * Capitalizes the first letter of any string variable
 * source: http://stackoverflow.com/a/1026087/477958
*/
function capitaliseFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
}

* css没有附上。如果需要告诉我

编辑：这是错误：

Answer 1

在JSfiddle外部资源中只使用这个

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

而不是使用整个HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

标签。它现在有效

https://jsfiddle.net/6qsmLoog/1/

编辑：我改变了你的JS小提琴添加它。所以链接现在显示了提要。

EDIT2：在本地运行

从此

更改ajax中的网址

 url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),

到

 url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),

由于document.location.protocol在本地搜索文档位置的协议，因此它是file：//而不是http：//。在服务器上运行的JSfiddle中，协议正确地设置为http。

自动RSS Feed列表使用Google Feed API的jQuery无法正常工作

1 个答案: