jQuery를 사용하여 RSS 피드를 구문 분석하고 싶습니다. 기본 jQuery 라이브러리를 사용 하여이 작업을 수행 할 수 있습니까? 아니면 플러그인을 사용해야합니까?
답변
경고
구글 피드 API는 공식적으로 사용되지 및 더 이상 작동하지 않습니다 !
전체 플러그인이 필요하지 않습니다. 콜백 함수에 RSS를 JSON 객체로 반환합니다.
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}답변
jFeed -jQuery RSS / Atom 플러그인을 사용하십시오 . 문서에 따르면 다음과 같이 간단합니다.
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});답변
1.5 jQuery부터 시작하여 xml 토론 기능이 내장되어 있으므로 플러그인이나 타사 서비스 없이이 작업을 쉽게 수행 할 수 있습니다. parseXml 함수가 있으며 $ .get 함수를 사용할 때 xml을 자동 구문 분석합니다. 예 :
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});답변
답변
업데이트 (2019 년 10 월 15 일)
jquery-rss 에서 fetch API를 사용하고 추가 종속성없이 작동 할 수있는 Vanilla RSS 라는 새로운 라이브러리로 핵심 로직을 추출했습니다 .
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
실물
게시하다:
훌륭한 템플릿과 함께 제공되며 사용하기 매우 쉬운 jquery-rss 도 사용할 수 있습니다 .
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})수율 (2013 년 9 월 18 일 기준) :
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>보다 실제 예제는 http://jsfiddle.net/sdepold/ozq2dn9e/1/ 을 .
답변
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>