使用jQuery解析RSS

我想使用jQuery来解析RSS提要。这可以用基本的jQuery库来完成吗？或者我需要使用一个插件？

224139 次浏览
小开

使用JFeed-一个jQuery RSS/Atom插件。根据文件，这很简单：

jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
小开

除非您的RSS数据是私有的，否则请使用Google Ajax Feed API.当然，它很快。

https：//developers.google.com/feed/.

小开

使用JFeed

function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');


var html = '';


for(var i = 0; i < feed.items.length && i < 5; i++) {


var item = feed.items[i];


html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';


html += '<div class="updated">'
+ item.updated
+ '</div>';


html += '<div>'
+ item.description
+ '</div>';
}


jQuery(sender).append(html);
}
});
}


<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
小开 
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: 'url=http://sports.espn.go.com/espn/rss/news/',
success: function(feed) {


//Title
$('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');


//Unordered List
var html = '<ul>';


$(feed.items).each(function(){
var $item = $(this);


//trace( $item.attr("link") );
html += '<li>' +
'<h3><a href ="' + $item.attr("link") + '" target="_new">' +
$item.attr("title") + '</a></h3> ' +
'<p>' + $item.attr("description") + '</p>' +
// '<p>' + $item.attr("c:date") + '</p>' +
'</li>';
});


html += '</ul>';


$('#result').append(html);
}
});
}
</script>
小开

我将jQuery与YQL一起用于feed.您可以使用YQL检索Twitter、RSS和Buzz.我读了http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/。对我来说很有用。

小开

JFeed有些过时，只能用于旧版本的jQuery.从更新到现在已经两年了。

zrssfeed可能不太灵活，但它很容易使用，并且可以与jQuery的当前版本（当前为1.4）一起使用。http://www.zazar.net/developers/zrssfeed/

下面是zrssfeed文档中的一个快速示例：

<div id="test"><div>


<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
小开

JFeed在IE中不起作用。

使用Zrssfeed。它在5分钟内就工作了。

小开
最佳答案

警告

Google Feed API正式已弃用和已经不起作用了。

不需要整个插件。这会将您的RSS作为JSON对象返回给回调函数：

function parseRSS(url, callback) {
$.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) {
callback(data.responseData.feed);
}
});
}
小开

对于我们这些讨论较晚的人来说，从1.5开始，jQuery具有内置的XML解析功能，这使得在没有插件或第三方服务的情况下很容易做到这一点。它有一个parseXML函数，并且在使用$.get函数时也会自动解析XML.例如：

$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
小开

我同意@安德鲁的观点。，使用Google是一种可靠的、可重用的方法，其巨大的好处是您可以获得JSON而不是XML.使用谷歌作为代理的另一个好处是，可能阻止你直接访问其数据的服务不太可能阻止谷歌。下面是一个使用SKI报告和条件数据的示例。它具有所有常见的现实世界应用程序：1）第三方RSS/XML 2）JSONP 3）当您无法完全按照所需的方式获取数据时，清理字符串并将字符串转换为数组4）加载时将元素添加到DOM.希望这能帮助一些人！

<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">


function displaySkiReport (feedResponse) {


// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;


// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);


// Parse ski report data from string
var itemsArray = itemString.split("/");




//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';


html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';


html += '<li>Ski Report Date: ' + publishedDate + '</li>';


html += '</ul>';


$('body').append(html);


}




function parseRSS(url, callback) {
$.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) {
callback(data.responseData.feed);
}
});
}


$(document).ready(function() {


// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);


});


</script>
小开

_，ABC_0建立在jQuery之上，简单的主题非常棒。
试一试。

小开

最新消息（2019年10月15日）

我将jQuery-RSS中的核心逻辑提取到一个名为香草RSS的新库中，该库使用FETCH API，可以在没有任何其他依赖项的情况下工作：

const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});

原创

工作岗位:

您还可以使用jQuery-RSS，它带有很好的模板，非常易于使用：

$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

收益率（截至2013年9月18日）：

<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>

有关工作示例，请参阅http://jsfiddle.net/sdepold/ozq2dn9e/1/。

小开 
(function(url, callback) {
jQuery.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) {
callback(data.responseData.feed);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});




<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
小开

JFeed很简单，并且有一个例子供您测试。但是，如果您正在解析来自另一个服务器的提要，则需要在该提要的服务器上允许跨地域资源共享（CORS）。您还需要检查浏览器支持。

我上传了样品，但当我通过HTTP协议将示例中的URL更改为类似example.com/feed.RSS的内容时，仍然没有从IE的任何版本中获得支持。IE8及更高版本应该支持CORS，但JFeed示例没有呈现Feed.

最好的办法是使用Google的API：
https://developers.google.com/feed/v1/devguide

请参阅：
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors

小开

_，ABC_0是一个不错的选择，它有一个内置的模板系统，并使用Google Feed API，因此它具有跨域支持。

小开

使用谷歌AJAX API，由Google缓存，以及您想要的任何输出格式。

代码示例； http://code.google.com/apis/ajax/playground/#load_feed

<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
*  How to load a feed via the Feeds API.
*/


google.load("feeds", "1");


// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';


// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
}


function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");


// Calling load sends the request off.  It requires a callback function.
feed.load(feedLoaded);
}


google.setOnLoadCallback(OnLoad);
</script>
小开

更新[4/25/2016]现在编写得更好，完全受支持的版本具有更多选项和功能，托管在github.jqrss

我看到内森·斯特鲁茨的已选择答案，但是，jQuery插件页面链接仍然关闭，该站点的主页似乎无法加载。我尝试了一些其他的解决方案，发现其中大多数不仅过时，而且容易！因此，我把我的帽子扔在那里，做了我自己的插件，这里有死链接，这似乎是一个提交答案的好地方。如果你在2012年（即将到来的2013年）寻找这个答案，你可能会像我一样注意到死链接和旧建议的挫败感。下面是一个链接到我的现代的插件的例子，以及插件的代码！只需将代码复制到JS文件&；像其他插件一样，在你的标题中链接它。使用非常EZ！

Jsfiddle

插件代码
2/9/2015-进行了逾期已久的更新，以在向其发送命令之前检查console！应该有助于解决旧的IE问题。

(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;


var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}


if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}


var o = $.extend(true, {}, $.jQRSS.defaults);


if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}


if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);


var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;


var ajaxData = {
num: o.count,
output: o.output,
};


if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;


$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}


if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null,  //  url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);

使用

//  Param ORDER does not matter, however, you must have a link and a callback function
//  link can be passed as "rss" in options
//  $.jQRSS(linkORsearchString, callbackFunction, { options })


$.jQRSS('someUrl.xml', function(feed) { /* do work */ })


$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })


$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })


$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })

$.jqrss（'在此处搜索单词而不是链接'，函数（feed）{/*do work*/}） //TODO：需要修复

选项

{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/*  Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
小开

_，ABC_0是非常轻量级的，并且没有强加任何特定的样式。

语法可以简单到

$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")

查看http：//jsfiddle.net/jhfrench/afhfn/工作实例

小开

超级饲料有一个jQuery插件，它可以很好地完成这一任务。 您不会有任何跨来源策略问题，并且更新是实时传播的。

小开

我建议你用菲德克。在Google Feed API被正式弃用后，大多数插件都无法正常工作。但菲德克仍在工作。它非常容易使用，并且有许多选项可以定制。

$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});

有选择

$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});

提交答案