6 075 Скрипты / Other

Парсер XML файлов на jQuery


Парсер xml файлов или же rss лент в формате xml с помощью jquery.

HTML

<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>
<div class="clear"></div>

Вот пример XML файла из которого мы будем парсить нужные участки текста и затем отдавать их на нашу страницу. Парсить я буду RSS ленту нашего же сайта pcvector.net.

RSS лента находится по адресу https://pcvector.net/rss.xml. Итак вот фрагмент:

Как видим, каждая новость у нас отделяется друг от друга тегами <item>, и в каждой новости есть такие теги как:

  • <title> - заголовок новости
  • <description> - краткое описание новости
  • <pubDate> - дата публикации новости

и другие, работать с которыми в рамках данного урока не будем.

CSS

Вот стили оформления наших спарсенных новостей:

JS

Подключаем jQuery и скрипт парсера:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "https://pcvector.net/rss.xml",
        dataType: "xml",
        success: xmlParser
    });
});
function xmlParser(xml) {
    $('#load').fadeOut();
    $(xml).find("item").each(function () {
        $(".main").append('<div class="book"><div class="title">' + $(this).find("title").text() + '</div><div class="description">' + $(this).find("description").text() + '</div><div class="date">Опубликовано ' + $(this).find("pubDate").text() + '</div></div>');
        $(".book").fadeIn(1000);
    });
    
    $('img').attr({ width: 200 });
}

В url - вводим адрес до нашего XML файла.

$(xml).find("item").each(function () - тут как видим обращаемся к элементу, которым отделяются друг от друга новости, то есть находим элемент item и применяем к нему функцию, в которой мы обрамляем в html теги спарсенные title , description и pubDate из XML файла. А после этого, ищется следующий элемент item и функция повторяется снова, то есть парсится следующая новость.

Добавлены эффекты fadeOut и fadeIn.

Так как в моей RSS ленте присутствуют большие картинки, то чтобы они не вылезали за пределы столбиков, я применил к ним принудительно ширину в 200px, если у вас нет картинок, то можете смело удалить строчку $('img').attr({ width: 200 });

Скачать 1312Загрузок 1,71 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи