แยกวิเคราะห์ RSS ด้วย jQuery


194

ฉันต้องการใช้ jQuery เพื่อแยกวิเคราะห์ RSS ฟีด สิ่งนี้สามารถทำได้กับไลบรารี่ฐาน jQuery หรือไม่ฉันจะต้องใช้ปลั๊กอินหรือไม่?


1
ฉันจะไปหาgithub.com/sdepold/jquery-rss - มันเป็นตัวเลือกที่ดีที่สุดในตอนนี้มีหลายตัวเลือก! :)
Komrath

สำหรับทุกคนที่มาที่นี่จาก google ฉันต้องสร้างสิ่งที่คล้ายกันสำหรับโปรแกรมดูภาพขนาดย่อ deviantART ที่ดีและง่ายและกางออกได้อย่างง่ายดาย: adamjamesnaylor.com/2012/11/05/... โปรดทราบว่าใช้ประโยชน์จากโปรแกรมอ่านฟีดของ Google แต่แปลงเป็น JSON เท่านั้น
Adam Naylor

คำตอบ:


208

คำเตือน

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

4
พยายาม jFeed และใช้งานไม่ได้ผลดีและไม่ต้องใช้ห้องสมุดเพิ่มเติม
diggersworld

15
ระวัง ... เมื่อใช้ google api ฟีดจะถูกแคชดังนั้นคุณจะไม่ได้รับฟีดล่าสุดและยิ่งใหญ่ที่สุด
c0deNinja

3
แคชอยู่ที่ไหน ฉันจะลบแคชได้อย่างไร
Jeg Bagus

39
นี่ไม่ใช่คำตอบที่ดี ขึ้นอยู่กับ บริษัท บุคคลที่สาม [Google] ที่ยังคงให้บริการ ไม่ตอบคำถามเดิม ("แยกวิเคราะห์ RSS กับ jQuery") และโฆษณา Google แทน จะเกิดอะไรขึ้นหาก Google ลดหรือปรับ ajax API เว็บไซต์ของคุณหยุดพัก
Charles Goodwin

11
@CharlesGoodwin Google เพิ่งลบ API นี้! Developers.google.com/feed/?hl=th
GôTô

185

ใช้ jFeed - ปลั๊กอิน jQuery RSS / Atom ตามเอกสารนั้นง่ายเหมือน:

jQuery.getFeed({
   url: 'rss.xml',
   success: function(feed) {
      alert(feed.title);
   }
});

2
ตัวอย่างของการใช้งานจริงหรือไม่? คือการแยกและการแสดงมากกว่าการแจ้งเตือน หรือมันง่ายเหมือน $ ("# results") ผนวก (feed.title)
Andy Brudtkuhl

3
หมายเหตุ: การดาวน์โหลดนั้นมีตัวอย่างที่ดีมากมายอยู่ในนั้น
Andy Brudtkuhl

12
Anirudha, บางทีคุณอาจลอง 7-zip? มันฟรีโอเพนซอร์สและเปิดไฟล์ประเภทต่าง ๆ รวมถึง tar / gzip
Nathan Strutz

100
โปรดทราบรุ่นล่าสุดของปลั๊กอินนี้สามารถใช้ได้บน Github
Alan H.

3
ดูเหมือนว่า jFeed จะไม่ได้รับการบำรุงรักษาอีกต่อไป (การเปลี่ยนแปลงล่าสุดของบันทึกย่อคือ 2 ปีและดูเหมือนว่าจะไม่สนใจคำขอดึงเปิดที่เปิดอยู่) และไม่สามารถใช้งานได้กับ jQuery รุ่นล่าสุด
Thilo

159

สำหรับพวกเราที่จะมาคุยกันช้ากว่าเริ่มต้นด้วย 1.5 jQuery มีความสามารถในการแยกวิเคราะห์ xml ในตัวซึ่งทำให้ง่ายในการทำสิ่งนี้โดยไม่ต้องใช้ปลั๊กอินหรือบริการของบุคคลที่สาม มันมีฟังก์ชั่น parseXml และจะอัตโนมัติ -x ในการแยกวิเคราะห์ xml เมื่อใช้ฟังก์ชัน $ .get เช่น:

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

10
ข้อผิดพลาด XmlHttpRequest: ไม่อนุญาตให้ใช้ Origin จาก Access-Control-Allow-Origin
jackocnr

12
@jackocnr ใช่นั่นเป็นข้อเสียของวิธีนี้ คุณไม่สามารถทำการร้องขอข้ามโดเมนได้จนกว่าคุณจะสามารถตั้งค่าส่วนหัว Access-Control-Allow-Origin บนเซิร์ฟเวอร์ต้นทางได้ หากเซิร์ฟเวอร์รองรับ jsonp แสดงว่าเป็นทางออกที่ดีที่สุดของคุณ มิฉะนั้นคุณอาจใช้พร็อกซีสคริปต์ภายในโดเมนของคุณเพื่อดึงข้อมูล xml จากนั้นเรียกใช้สคริปต์นั้นแทนเซิร์ฟเวอร์ภายนอก
เดวิดแฮมมอนด์

นี่เป็นคำตอบเดียวที่ไม่พึ่งพาปลั๊กอินหรือบริการภายนอกหรือไม่
Blazemonger

ทำไม$this.find("link").text()สตริงที่ส่งคืนว่างเสมอ ''
Jeff Tian

@JeffTian ยากที่จะพูดโดยไม่เห็น xml ของคุณ เหตุผลที่ชัดเจนที่สุดคือองค์ประกอบ <link> หายไปหรือว่างเปล่า
David Hammond

16

jFeed ไม่ทำงานใน IE

ใช้zRSSFeed มันทำงานได้ใน 5 นาที


2
มีให้ที่zazar.net/developers/zrssfeed กำลังจะลองด้วยตัวเองเพื่อดูว่ามันเป็นไปอย่างไรดูสดใส
thewinchester

3
BTW, zRssFeed ใช้ภายในGoogle RSS ฟีด API ดังนั้นหากต้องการทำเลย์เอาท์ HTML เองมันง่ายกว่าที่จะดูตรงนั้นแทน
Ciantic

ห้านาทีหรือน้อยกว่า :)
Constanta

เด็ดสุด ๆ ... สิ่งเดียวคือถ้าพวกเขาให้ฟีดวัตถุมากกว่า HTML ทั้งในฟังก์ชั่นการโทรกลับกว่าว่าจะดี ...
shahil

2
FYI ทุกคนที่ต้องการใช้ปลั๊กอินนี้ ผู้พัฒนาโพสต์ต่อไปนี้ "ปลั๊กอินนี้ถูกยกเลิกเนื่องจาก API ของฟีด Google ถูกลบออกจากบริการซึ่งปลั๊กอินตอบกลับปลั๊กอินจะไม่สามารถใช้งานหรือสนับสนุนอีกต่อไป" ที่มา: zazar.net/developers/jquery/zrssfeed
phanf

16

อัปเดต (15 ต.ค. 2019)

ฉันแยกลอจิกหลักจาก jquery-rss ไปยังไลบรารีใหม่ที่ชื่อว่าVanilla RSSซึ่งใช้ API การดึงข้อมูลและสามารถทำงานได้โดยไม่ต้องพึ่งพาเพิ่มเติมใด ๆ :

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

อัตราผลตอบแทน (ณ 18 กันยายน 2013):

<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/สำหรับตัวอย่างการทำงาน


โปรดจำไว้ว่า jquery-rss ใช้ Google ฟีด API ซึ่งจะแคชฟีดซึ่งอาจมีปัญหา คุณสามารถหลอกลวงได้โดยการเพิ่มพารามิเตอร์ URL ขยะ: stackoverflow.com/questions/13401936//
kukabuka

โปรดระบุตัวอย่างในการจัดรูปแบบวันที่โดยไม่ใช้moment.js
Purvesh Desai

ตรวจสอบตัวอย่างข้อมูลต่อไปนี้gist.github.com/sdepold/d1e5e0e7a66fc77930fe มันจะสร้างสิ่งนี้: "<เนื้อหาบางส่วน>, [@ 2015-11-18]"
sdepold

เพิ่งกล่าวถึง jquery-rss ไม่ได้ใช้ Google Feed API แต่เป็นการแทนที่แบบหล่นเรียกว่า Feedr ( github.com/sdepold/feedrapp ) และทำงานได้ตามลำดับแม้ว่า API เดิมจะถูกปิด
sdepold

15

ใช้ JFeed

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>

9

ใช้ Google AJAX Feed API ยกเว้นว่าข้อมูล RSS ของคุณเป็นแบบส่วนตัว แน่นอนมันเร็วมาก

https://developers.google.com/feed/


1
เป็นความคิดที่ดี แต่ไม่ทำงานเมื่อคุณอยู่ในไฟร์วอลล์ที่ต้องใช้การตรวจสอบความถูกต้องของพร็อกซี่โดยใช้กล่องโต้ตอบ
thewinchester

ฟีดของ Google เลิกใช้แล้วและไม่รองรับอีกต่อไป
vikas etagi

8

อัปเดต [ 4/25/2016 ] ตอนนี้เวอร์ชันที่ดีขึ้นสำหรับการเขียนและการสนับสนุนอย่างเต็มที่พร้อมตัวเลือกและความสามารถเพิ่มเติมที่ GitHub.jQRSS

ฉันเห็นคำตอบที่เลือกโดยNathan Strutzอย่างไรก็ตามลิงก์หน้าปลั๊กอิน jQuery ยังคงไม่ทำงานและดูเหมือนว่าหน้าแรกของไซต์นั้นจะโหลดไม่ได้ ฉันลองวิธีแก้ปัญหาอื่น ๆ และพบว่าส่วนใหญ่เป็นไม่เพียง แต่ล้าสมัย แต่ง่าย ! ดังนั้นฉันจึงโยนหมวกออกมาและสร้างปลั๊กอินของตัวเองและด้วยการเชื่อมโยงที่ตายแล้วที่นี่ดูเหมือนว่าเป็นสถานที่ที่ดีในการส่งคำตอบ หากคุณกำลังมองหาคำตอบนี้ในปี 2012 (ใกล้จะถึงปี 2013) คุณอาจสังเกตเห็นความหงุดหงิดของการเชื่อมโยงและคำแนะนำเก่า ๆ ที่ฉันทำ ด้านล่างเป็นลิงค์ไปยังตัวอย่างปลั๊กอินที่ทันสมัยของฉันเช่นเดียวกับรหัสไปยังปลั๊กอิน! เพียงคัดลอกรหัสลงในไฟล์ JS และเชื่อมโยงในส่วนหัวของคุณเช่นปลั๊กอินอื่น ๆ การใช้งานนั้นสุดยอด EZ!

jsFiddle

รหัสปลั๊กอิน
2/9/2015 - อัปเดตเกินกำหนดเป็นเวลานานเพื่อตรวจสอบconsoleก่อนที่จะส่งคำสั่ง! ควรช่วยแก้ไขปัญหา IE ที่เก่ากว่า

(function($) {
    if (!$.jQRSS) { 
        $.extend({  
            jQRSS: function(rss, options, func) {
                if (arguments.length <= 0) return false;

                var str, obj, fun;
                for (i=0;i<arguments.length;i++) {
                    switch(typeof arguments[i]) {
                        case "string":
                            str = arguments[i];
                            break;
                        case "object":
                            obj = arguments[i];
                            break;
                        case "function":
                            fun = arguments[i];
                            break;
                    }
                }

                if (str == null || str == "") {
                    if (!obj['rss']) return false;
                    if (obj.rss == null || obj.rss == "") return false;
                }

                var o = $.extend(true, {}, $.jQRSS.defaults);

                if (typeof obj == "object") {
                    if ($.jQRSS.methods.getObjLength(obj) > 0) {
                        o = $.extend(true, o, obj);
                    }
                }

                if (str != "" && !o.rss) o.rss = str;
                o.rss = escape(o.rss);

                var gURL = $.jQRSS.props.gURL 
                    + $.jQRSS.props.type 
                    + "?v=" + $.jQRSS.props.ver
                    + "&q=" + o.rss
                    + "&callback=" + $.jQRSS.props.callback;

                var ajaxData = {
                        num: o.count,
                        output: o.output,
                    };

                if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
                if (o.userip != null) ajaxData.scoring = o.userip;

                $.ajax({
                    url: gURL,
                    beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
                    dataType: o.output != "xml" ? "json" : "xml",
                    data: ajaxData,
                    type: "GET",
                    xhrFields: { withCredentials: true },
                    error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
                    success: function (data, textStatus, jqXHR) {  
                        var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
                            e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
                        if (window['console']) {
                            console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
                            console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
                            console.log(new Array(70).join('-'));
                        }

                        if (fun) {
                            return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
                        }
                        else {
                            return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
                        }
                    }
                });
            }
        });
        $.jQRSS.props = {
            callback: "?",
            gURL: "http://ajax.googleapis.com/ajax/services/feed/",
            scoring: "h",
            type: "load",
            ver: "1.0"
        };
        $.jQRSS.methods = {
            getObjLength: function(obj) {
                if (typeof obj != "object") return -1;
                var objLength = 0;
                $.each(obj, function(k, v) { objLength++; })
                return objLength;
            }
        };
        $.jQRSS.defaults = {
            count: "10", // max 100, -1 defaults 100
            historical: false,
            output: "json", // json, json_xml, xml
            rss: null,  //  url OR search term like "Official Google Blog"
            userip: null
        };
    }
})(jQuery);

ใช้

//  Param ORDER does not matter, however, you must have a link and a callback function
//  link can be passed as "rss" in options
//  $.jQRSS(linkORsearchString, callbackFunction, { options })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ })

$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })

$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })

$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })

$ .jQRSS ('ค้นหาคำที่นี่แทนลิงค์', ฟังก์ชั่น (ฟีด) {/ * do work * /}) // TODO: จำเป็นต้องแก้ไข

ตัวเลือก

{
    count: // default is 10; max is 100. Setting to -1 defaults to 100
    historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache. 
    output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
    rss: // simply an alternate place to put news feed link or search terms
    userip: // as this uses Google API, I'll simply insert there comment on this:
        /*  Reference: https://developers.google.com/feed/v1/jsondevguide
            This argument supplies the IP address of the end-user on 
            whose behalf the request is being made. Google is less 
            likely to mistake requests for abuse when they include 
            userip. In choosing to utilize this parameter, please be 
            sure that you're in compliance with any local laws, 
            including any laws relating to disclosure of personal 
            information being sent.
        */
}

5
(function(url, callback) {
    jQuery.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);
        }
    });
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
    var entries = feed.entries, feedList = '';
    for (var i = 0; i < entries.length; i++) {
        feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
    }
    jQuery('.feed > ul').append(feedList);
});


<div class="feed">
        <h4>Hacker News</h4>
        <ul></ul>
</div>

5

ฉันเห็นด้วยกับ @Andrew การใช้ Google เป็นวิธีที่นำกลับมาใช้ใหม่ได้และมีประโยชน์มากที่คุณจะได้รับ JSON กลับมาเป็น XML ข้อได้เปรียบที่เพิ่มขึ้นของการใช้ Google เป็นพร็อกซีคือบริการที่อาจบล็อกการเข้าถึงข้อมูลโดยตรงของคุณนั้นไม่น่าจะหยุด Google ได้ นี่คือตัวอย่างการใช้รายงานสกีและข้อมูลเงื่อนไข นี่เป็นแอพพลิเคชั่นที่ใช้กันทั่วไปในโลกแห่งความเป็นจริง: 1) บุคคลที่สาม RSS / XML 2) JSONP 3) การทำความสะอาดสตริงและสตริงไปยังอาร์เรย์เมื่อคุณไม่สามารถรับข้อมูลตามที่คุณต้องการได้ 4) DOM หวังว่านี่จะช่วยให้บางคน!

<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">

    function displaySkiReport (feedResponse) {

    // Get ski report content strings
    var itemString = feedResponse.entries[0].content;
    var publishedDate = feedResponse.entries[0].publishedDate;

    // Clean up strings manually as needed
    itemString = itemString.replace("Primary: N/A", "Early Season Conditions"); 
    publishedDate = publishedDate.substring(0,17);

    // Parse ski report data from string
    var itemsArray = itemString.split("/");


    //Build Unordered List
    var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
    html += '<ul>';

    html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
    // Last 48 Hours
    html += '<li>' + itemsArray[1] + '</li>';
    // Snow condition
    html += '<li>' + itemsArray[2] + '</li>';
    // Base depth
    html += '<li>' + itemsArray[3] + '</li>';

    html += '<li>Ski Report Date: ' + publishedDate + '</li>';

    html += '</ul>';

    $('body').append(html);    

    }


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

    $(document).ready(function() {              

        // Ski report
        parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);

    });

</script>

2
สิ่งนี้จะไม่ทำงานเนื่องจากปัญหาข้ามโดเมน คุณต้องมี JSONP
gotofritz

1
มันใช้งานได้สำหรับฉัน คุณทดสอบหรือไม่ ค่อนข้างแน่ใจว่า Google ส่งคืน jsonp โดยใช้พารามิเตอร์โทรกลับไม่ใช่ ajax dataType
Dylan Valade

ไม่แน่ใจว่าการลงคะแนนเสียงนั้นมีไว้เพื่ออะไร รหัสนี้ยังคงใช้งานได้สามปีต่อมา วางทั้งหมดลงในคอนโซลและคุณจะเห็นเงื่อนไขการเล่นสกี (XML) ปัจจุบันที่เพิ่มในส่วนท้ายของหน้านี้
Dylan Valade

4

jFeed ค่อนข้างล้าสมัยใช้งานได้กับ jQuery รุ่นเก่ากว่าเท่านั้น เป็นเวลาสองปีแล้วที่มีการอัปเดต

zRSSFeed อาจมีความยืดหยุ่นน้อยกว่าเล็กน้อย แต่ใช้งานง่ายและทำงานได้กับ jQuery เวอร์ชันปัจจุบัน (ปัจจุบัน 1.4) http://www.zazar.net/developers/zrssfeed/

นี่คือตัวอย่างรวดเร็วจากเอกสาร zRSSFeed:

<div id="test"><div>

<script type="text/javascript">
$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });
});
</script>

อาจทราบได้ว่านี่ใช้ได้กับฟีดที่ไม่ใช่ในท้องที่เท่านั้นเนื่องจากใช้ Google ฟีด API (Google จะต้องสามารถโหลดฟีด xml)
CmdrTallen

2

ฉันกำลังใช้ jQuery กับ yql เพื่อเป็นอาหาร คุณสามารถดึงข้อมูล twitter, rss, buzz ด้วย yql ผมอ่านจากhttp://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/ มันมีประโยชน์มากสำหรับฉัน


2

ผมแนะนำให้คุณใช้FeedEk หลังจาก Google Feed API เลิกใช้งานอย่างเป็นทางการแล้วปลั๊กอินส่วนใหญ่จะไม่ทำงาน แต่ FeedEk ยังทำงานอยู่ มันใช้งานง่ายมากและมีตัวเลือกมากมายในการปรับแต่ง

$('#divRss').FeedEk({
   FeedUrl:'http://jquery-plugins.net/rss'
});

ด้วยตัวเลือก

$('#divRss').FeedEk({
  FeedUrl:'http://jquery-plugins.net/rss',
  MaxCount : 5,
  ShowDesc : true,
  ShowPubDate:true,
  DescCharacterLimit:100,
  TitleLinkTarget:'_blank',
  DateFormat: 'MM/DD/YYYY',
  DateFormatLang:'en'
});

ฉันไม่แน่ใจว่าคุณสามารถกำหนดปลายทาง api ทางเลือกจริง ๆ หรือไม่ แต่ถ้าคุณสามารถทำได้อาจมีความเป็นไปได้ที่จะแทนที่ google feed api ด้วย feedrapp: github.com/sdepold/feedrapp (ซึ่งเป็นกระดูกสันหลังสำหรับ jquery ด้วย -rss ทุกวันนี้)
sdepold

สิ่งนี้ไม่ทำการแยกวิเคราะห์ มันใช้ yahooapis ในการแยกวิเคราะห์แล้วมันก็แสดงเนื้อหา
David L.

1
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
    function loadFeed(){
        $.getFeed({
            url: 'url=http://sports.espn.go.com/espn/rss/news/',
            success: function(feed) {

                //Title
                $('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');

                //Unordered List
                var html = '<ul>';

                $(feed.items).each(function(){
                    var $item = $(this);

                    //trace( $item.attr("link") );
                    html += '<li>' +
                        '<h3><a href ="' + $item.attr("link") + '" target="_new">' +
                        $item.attr("title") + '</a></h3> ' +
                        '<p>' + $item.attr("description") + '</p>' +
                        // '<p>' + $item.attr("c:date") + '</p>' +
                        '</li>';
                });

                html += '</ul>';

                $('#result').append(html);
            }
        });
    }
</script>

ไม่ใช่คำตอบที่ไม่ดี แต่น่าเสียดายที่คุณไม่ได้ทำงานที่ยิ่งใหญ่ที่สุดในการวางโค้ด ;-)
จนถึง

0

ใช้google ajax api , แคชโดย google และรูปแบบเอาต์พุตใด ๆ ที่คุณต้องการ

ตัวอย่างโค้ด http://code.google.com/apis/ajax/playground/#load_feed

<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
*  How to load a feed via the Feeds API.
*/

google.load("feeds", "1");

// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
  if (!result.error) {
    // Grab the container we will put the results into
    var container = document.getElementById("content");
    container.innerHTML = '';

    // Loop through the feeds, putting the titles onto the page.
    // Check out the result object for a list of properties returned in each entry.
    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div = document.createElement("div");
      div.appendChild(document.createTextNode(entry.title));
      container.appendChild(div);
    }
  }
}

function OnLoad() {
  // Create a feed instance that will grab Digg's feed.
  var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");

  // Calling load sends the request off.  It requires a callback function.
  feed.load(feedLoaded);
}

google.setOnLoadCallback(OnLoad);
</script>

นี่เป็นตัวเลือกที่ยอดเยี่ยมเพราะไม่ต้องพึ่งพา jquery!
Pete Gardner



-1

jQuery Feedsเป็นตัวเลือกที่ดีมีระบบ templating ในตัวและใช้ Google Feed API ดังนั้นจึงมีการสนับสนุนข้ามโดเมน



-2

jFeed นั้นง่ายและมีตัวอย่างให้คุณทดสอบ แต่ถ้าคุณแยกวิเคราะห์ฟีดจากเซิร์ฟเวอร์อื่นคุณจะต้องอนุญาตให้Cross Origin Resource Sharing (CORS) บนเซิร์ฟเวอร์ของฟีด คุณจะต้องตรวจสอบการสนับสนุนเบราว์เซอร์ตรวจสอบการสนับสนุนเบราว์เซอร์

ฉันอัปโหลดตัวอย่างแต่ยังไม่ได้รับการสนับสนุนจาก IE ในทุกรุ่นเมื่อฉันเปลี่ยน URL ในตัวอย่างเป็นสิ่งที่ต้องการ example.com/feed.rss ผ่านโปรโตคอล http ควรรองรับ CORS สำหรับ IE 8 ขึ้นไป แต่ตัวอย่าง jFeed ไม่ได้แสดงผลฟีด

ทางออกที่ดีที่สุดของคุณคือการใช้ API ของ Google:
https://developers.google.com/feed/v1/devguide

ดู:
https://github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.