代码之家 › 专栏 › 技术社区 › Learning

在预定义模板中使用jquery使用xmlrss提要

rss-reader rss jquery

0

Learning · 技术社区 · 6 年前

我想使用rss feed显示其他网站上使用jQuery的图像

XML RSS结构类似于

<rss version="2.0">  
<channel>  
    <title>Gallery</title>  
    <link>http://www.example.com</link>  
    <description>  Latest Photos</description>  

    <item>  
        <title>First Title of Photo</title>                
        <link >https://www.example.com/image/gallery/1.jpg </link>
        <pubDate>Sun, 17 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item>

    <item>  
        <title>Second Title of Photo</title>                
        <link >https://www.example.com/image/gallery/2.jpg </link>
        <pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item>

    <item>  
        <title>Third Title of Photo</title>                
        <link >https://www.example.com/image/gallery/3.jpg </link>
        <pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>  
        <description>Description of the image </description>  
   </item> 


</channel>  
</rss>

<div id="feed">
  <div class="item">
    <img  src="image-path"/>
    <span class="image-title"></span>
  </div>
</div>

如何更改下面的代码以使用上面的结构。。

$(document).ready(function() {  
    var url = 'http://www.recruiter.com/feed/career.xml'; //Data in XML format  
    $.ajax({  
        type: 'GET',  
        url: "https://api.rss2json.com/v1/api.json?rss_url=" + url, //For converting default format to JSON format  
        dataType: 'jsonp', //for making cross domain call  
        success: function(data) {  
            alert('Success');  
            $("#feed").append(data.feed);  
            console.log(data.feed.description);  
        }  
    });  
});

1 回复 | 直到 6 年前

1

2

Mohammad DefenestrationDay 6 年前

你得绕过去 data.items 并将目标数据添加到html中。如下图所示

$.each(data.items, function(i, item){
  $("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
});

var url = 'http://www.recruiter.com/feed/career.xml';
$.ajax({  
  type: 'GET',  
  url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
  dataType: 'jsonp',
  success: function(data) {    
    $.each(data.items, function(i, item){
        $("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
    });
  }  
});

demo