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

Question

我想使用 rss 提要在其他网站上使用 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>

我的 HTML 页面具有以下 HTML 结构

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

Answer 1

您需要遍历 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

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

Consume XML RSS feed using jquery in a predefined template

rss

jquery

rss-reader