用jQueryparsingRSS

我想用jQuery来parsingRSS提要。 这可以用基本的jQuery库开箱即可完成，还是需要使用插件？

Answer 1

警告

Google Feed API已被正式弃用 ， 不再适用 ！

---

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

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); } }); } 

Answer 2

使用jFeed – 一个jQuery RSS / Atom插件。 根据文件，它是如此简单：

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

Answer 3

对于我们这些迟来的人来说，从1.5开始，jQuery具有内置的xmlparsingfunction，这使得在没有插件或第三方服务的情况下执行此操作变得相当容易。 它有一个parseXml函数，并且在使用$ .get函数时也会自动parsingxml。 例如：

 $.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... }); }); 

Answer 4

jFeed在IE中不起作用。

使用zRSSFeed 。 如果在5分钟内工作

Answer 5

使用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> 

Answer 6

你也可以使用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 US Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li> </ul> </div> 

请参阅http://jsfiddle.net/jhfrench/AFHfn/以获取工作示例。;

Answer 7

除非您的RSS数据是私人的，否则请使用Google AJAX Feed API。 当然，这很快。

https://developers.google.com/feed/

Answer 8

更新 [ 4/25/2016 ]现在更好的书面和完全支持的版本与更多的选项和能力在GitHub.jQRSS

我看到由Nathan Strutz select的答案 ，但是，jQuery插件页面链接仍然closures，该网站的主页似乎没有加载。 我尝试了一些其他的解决scheme，发现其中大部分是，不仅过时，而且容易！ 因此，我把帽子扔在那里，制作了我自己的插件，在这里的死链接，这似乎是一个提交答案的好地方。 如果你在2012年（即将到2013年）寻找这个答案，你可能会注意到这里的死链接和老build议的挫折。 下面是我现代插件示例的链接以及插件的代码！ 只需将代码复制到JS文件中，并像其他插件一样将其链接到您的头文件中。 使用是极端EZ！

的jsfiddle

插件代码
_{2015年2月9日 – 作出长期逾期更新检查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（'在这里search词而不是链接'，函数（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. */ } 

Answer 9

 (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> 

Answer 10

我同意@Andrew ，使用Google是一个可靠的，可重复使用的方式，可以获得JSON而不是XML的巨大好处。 将Google用作代理的另一个好处是可能阻止您直接访问其数据的服务不太可能阻止Google。 这是一个使用滑雪报告和条件数据的例子。 这有所有常见的现实世界的应用程序：1）第三方的RSS / XML 2）JSONP 3）清理string和string数组，当你不能得到所需的数据完全一样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> 

Answer 11

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> 

Answer 12

我正在使用jQuery与YQL的饲料。 您可以使用yql检索twitter，rss，buzz。 我从http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/阅读。; 这对我很有用。

Answer 13

 <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> 

Answer 14

使用谷歌ajax API ，由谷歌caching和任何输出格式，你想要的。

代码示例; 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> 

Answer 15

zRSSfeedbuild立在jQuery上 ，简单的主题非常棒。
试一试。

Answer 16

jQuery-rss项目非常轻量级，并没有强加任何特定的样式。

语法可以像

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

在http://jsfiddle.net/jhfrench/AFHfn/上查看一个工作示例;

Answer 17

我build议你使用FeedEk 。 谷歌饲料API正式弃用后大部分插件不起作用。 但FeedEk仍然在工作。 这是非常容易使用，并有很多选项来定制。

 $('#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' }); 

Answer 18

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

Answer 19

Superfeedr有一个很好的jQuery插件 。 您将不会有任何Cross Origin Policy问题，并且实时传播更新。

Answer 20

jFeed很容易，并有一个例子供您testing。 但是，如果您要parsing来自其他服务器的供稿，则需要在供稿服务器上允许跨源资源共享 （CORS）。 您还需要检查浏览器支持 。

我上传了示例，但仍然没有从任何版本的IE获得支持，当我通过http协议将示例中的url更改为example.com/feed.rss。 IE 8及以上版本应支持CORS，但jFeed示例没有呈现Feed。

您最好的select是使用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