2016-05-10 5 views
1

プラグインを使用せずにrssフィードをjQueryで作成しようとしていますが、ここでは解決策が見つかりました:designshack.net GoogleフィードAPIを使用しています。私は解決策を見つけるのは簡単だが、うまくいかない。私が探しているのは、プラグインなしでjQueryを使って他のブログやサイトからJSONレスポンスを解析するRSSフィードです。GoogleフィードAPIを使用したjQueryの自動フィード

ともにfiddleリンク。

コードここにある:

<!doctype html> 
<html lang="en-US"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="Content-Type" content="text/html"> 
<title>Automated jQuery RSS Feed Demo</title> 
    <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="js/parser.js"></script> 
</head> 

<body> 
    <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a></div> 

    <div id="w"> 
    <div id="content"> 
     <h1>Automated jQuery RSS Feed Listing</h1> 

     <div id="nouperss" class="feedcontainer"></div> 
     <hr> 

    </div><!-- @end #content --> 
    </div><!-- @end #w --> 
<script type="text/javascript"> 
$(function(){ 
// running custom RSS functions 
parseRSS('http://www.noupe.com/feed/', '#nouperss'); 

}); 
</script> 
</body> 
</html> 

parser.js(jQueryの)

/** 
* parses any RSS/XML feed through Google and returns JSON data 
* source: http://stackoverflow.com/a/6271906/477958 
*/ 
function parseRSS(url, container) { 
    $.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) { 
    //console.log(data.responseData.feed); 
     $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>'); 

    $.each(data.responseData.feed.entries, function(key, value){ 
    var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>'; 
    $(container).append(thehtml); 
     }); 
    } 
    }); 
} 

/** 
* Capitalizes the first letter of any string variable 
* source: http://stackoverflow.com/a/1026087/477958 
*/ 
function capitaliseFirstLetter(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
} 

* CSS付属しておりません。

EDITを必要に応じて教えてください:ここでエラーです:JSfiddle外部リソース 使用で enter image description here

答えて

2

ちょうどこの

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js 

の代わりに、全体のHTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

タグを使用して。私はリンクが今のフィードを示しthat.so追加するにはJSのフィドルを変更:それは今

https://jsfiddle.net/6qsmLoog/1/

EDITに動作します。

EDIT2:ローカルドキュメントの場所にあるプロトコルのdocument.location.protocol検索以来、この

url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), 

から

url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), 

にAJAXで

変更URLを、それを実行しています、ローカルでは、http://の代わりにfile://です。サーバーで実行されるJSfiddleでは、プロトコルはhttpに正しく設定されています。

+0

はい、私はあなたが何を変更したのか正確には得られませんでした。 – NewBee

+0

だから、Jsfiddleで。右側にあります。外部リソースと呼ばれるタブがあります。ここではjqueryへのパスについて言及する必要があります。あなたはそこにhtmlタグ全体を追加しました。本質的に、jqueryライブラリを認識しませんでした。 Jqueryライブラリが正しくインポートされていることを確認してください。そのような単純な – Imprfectluck

+0

チップが1つ。ブラウザのコンソールを開くだけでエラー$が未定義の参照であることがわかります。これは通常、Jqueryが正しくインポートされないことを意味します。通常、ブラウザの開発者コンソールでデバッグを開始します。 – Imprfectluck

関連する問題