Rss和Javascript,解析并显示提要



在这种情况下,我正在尝试获取RSS提要http://feeds.bbci.co.uk/news/rss.xml?edition=uk,并将其显示在一些css设计的卡片中,有点像我页面上的divcontainer元素中的新闻提要。我尝试了几个选项,比如feednami、jFeed等,但都没能成功。我在下面包含了一个代码示例,以更好地说明我的意思和我需要获取的信息,听起来有一个非常简单的答案,但我一直找不到。我知道google提要API以前会很好,但现在被弃用了,这是否意味着我不应该使用它?

// URL of feed to pull, and integer specifying how many items to pull from that feed
var feedURL = ;
var noOfItems = 20;
// In the 2D array of items we will store [0]Title, [1]Link, [2]Description/Text, [3]Source (this will be used in a later version to specify image
// in this iteration source will always be BBC so have hardcoded image) [4]Date (displayable format) [5]Date in milliseconds to be used in a later iteration
// [6]Image path (to be calculated from source, for now i have simply hardcoded the image path for the bbc logo, but eventualy will implement an array of
// feedURLs, and a switch statement to assign each source the correct logo)
var feedItems = new Array(noOfItems);
for (var i = 0; i < feedItems.length; i++) {
x[i] = new Array(6);
}
// ----------------------- Pull Rss Feed -------------------------------------//
// Have no idea how to implement this now, have tried jFeed, and Feednami, could get neither to work
// looked into doing it myself but came across issues with javascript ecurity and the feed needing to be from the same url

//-------------------------- Creating Card on News Feed ---------------------//
// This feature could probably be made into a function? taking input of the variables below?
// Not entirely sure how best to implement this until i know how to pull the info from the xml feed
var itemtitle;
var itemlink;
var itemtext;
var itemimage = 'img/sources/bbc.png';
var itemdate;
var itemcard;   
itemcard = '<div id=card>';
itemcard += '<img src=';
itemcard += itemimage;
itemcard += ' id=cardimg>';
itemcard += '<a href=';
itemcard += itemlink;
itemcard += ' id=cardlink><h1 id=cardhead>';
itemcard += itemtitle;
itemcard += '</h1></a>';
itemcard += '<h4 id=cardinfo>';
itemcard += itemdate;
itemcard += '</h4>';
itemcard += '<p id=cardtext>';
itemcard += itemtext;
itemcard += '</p>';
itemcard += '</div>';

$('#feedcontainer').append(itemcard);

您只需使用jQuery:即可完成

$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'https://feeds.bbci.co.uk/news/rss.xml?edition=uk',
crossDomain: true,
dataType: "xml",
success: function(data){
console.log(data);
}
});
});

但是,你应该意识到你可能面临的跨领域问题。

最新更新