2010-02-24 64 views
3

我想使用jQuery读取多个RSS源。如何动态读取RSS

我想写一个灵活的功能,只需要RSS网址,它会输出只有它的标题和图像如何做到这一点的多个RSS网址?

回答

5

最简单的方法是使用Google AJAX Feed API。他们有一个really simple example,适合你想要什么好听:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

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

function initialize() { 
    var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml"); 
    feed.load(function(result) { 
    if (!result.error) { 
     var container = document.getElementById("feed"); 
     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); 
     } 
    } 
    }); 
} 
google.setOnLoadCallback(initialize); 

</script> 
<div id="feed"></div> 

当然,你可以用API,而不是使用本地DOM调用混合jQuery的。

0

晚会有点晚,但我实际上做了一些类似的使用deviantART画廊饲料和显示最新的缩略图。我把它包成易于使用几个功能:

function keratin_callback(elem, data) 
{ 
    if (!data 
     || !data.entries 
     || data.entries.length < 1 
     || !data.entries[0].mediaGroups 
     || data.entries[0].mediaGroups.length < 1 
     || !data.entries[0].mediaGroups[0].contents 
     || data.entries[0].mediaGroups[0].contents.length < 1 
     || !data.entries[0].mediaGroups[0].contents[0].thumbnails 
     || data.entries[0].mediaGroups[0].contents[0].thumbnails.length < 1) { 
     $("<span>Data returned from feed not in expected format.</span>").appendTo(elem); 
     return; 
    } 

    var entry = data.entries[0]; 
    $("<img>").attr("src", entry.mediaGroups[0].contents[0].thumbnails[0].url) 
       .appendTo(elem) 
       .wrap("<a href="" + entry.link + "" title="Title: " + entry.title + "\nPublished: " + entry.publishedDate + "" rel="related" target="_blank"></a>"); 
} 

function keratin(elem, url) 
{ 
    //keratin written by adam james naylor - www.adamjamesnaylor.com 
    if (!elem || elem.length < 1) return; //no element found 
    $.ajax({ 
     //you could use document.location.protocol on the below line if your site uses HTTPS 
     url: 'http:' + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url + '&cache=' + Date.UTC()), 
     dataType: 'json', 
     success: function(data) { 
      if (!data || !data.responseData) { 
       return keratin_callback(elem, null); 
      } 
      return keratin_callback(elem, data.responseData.feed); 
     } 
    }); 
} 

$(document).ready(function() { 
    keratin($('#da_gallery'), 'http://backend.deviantart.com/rss.xml?q=gallery%3Adeusuk%2F28671222&type=deviation') 
}); 

全部细节在这里:http://www.adamjamesnaylor.com/2012/11/05/Keratin-DeviantART-Latest-Deviation-Widget.aspx