Использование XML RSS-канала с использованием jquery в предопределенном шаблоне - PullRequest
Новая
       49

Использование XML RSS-канала с использованием jquery в предопределенном шаблоне

0 голосов
/ 08 октября 2018

Я хочу использовать RSS-канал для показа изображений на другом веб-сайте с использованием jQuery

Структура XML XML похожа на 

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

1 Ответ

0 голосов
/ 08 октября 2018

Вам нужно перебрать 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

...