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

【问题标题】：Consume XML RSS feed using jquery in a predefined template在预定义的模板中使用 jquery 使用 XML RSS 提要
【发布时间】：2018-10-08 21:28:09
【问题描述】：

我想使用 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);  
        }  
    });  
});

【问题讨论】：

我在你的 html 中找不到#rss-default
您好，其他代码仅供参考，我是从博客中复制的，应该是#feed

标签： jquery rss rss-reader

【解决方案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查看结果

【讨论】：