jQuery 使用 Google Feed API 的自动 RSS Feed 列表不工作
Automated RSS Feed List With jQuery using Google Feed API not working
我试图在 jQuery 中构建 rss 提要而不使用任何插件,我在这里找到了一个解决方案:designshack.net 它使用 Google 提要 API 这是不再使用。我发现解决方案很简单,但它不起作用。我正在寻找的是一个 RSS 提要,它使用 jQuery 解析来自其他 blogs/sites 的 JSON 响应,没有任何插件。
同时附上 fiddle link.
代码在这里:
<!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:
*/
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:
*/
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
*css 未附加。需要的话告诉我
编辑:这是错误:
在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 fiddle 以添加 that.so link 现在显示提要。
EDIT2:运行 在本地
从
中更改 ajax 中的 URL
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.
我试图在 jQuery 中构建 rss 提要而不使用任何插件,我在这里找到了一个解决方案:designshack.net 它使用 Google 提要 API 这是不再使用。我发现解决方案很简单,但它不起作用。我正在寻找的是一个 RSS 提要,它使用 jQuery 解析来自其他 blogs/sites 的 JSON 响应,没有任何插件。
同时附上 fiddle link.
代码在这里:
<!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:
*/
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:
*/
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
*css 未附加。需要的话告诉我
编辑:这是错误:
在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 fiddle 以添加 that.so link 现在显示提要。
EDIT2:运行 在本地
从
中更改 ajax 中的 URL 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.