2012-03-16 7 views
0

私はInstagram apiを呼び出して、最新の人気画像を表示しようとしています。まず、api urlを指定してjQuery ajax関数を呼び出します。ブラウザのURLをキー入力すると、いくつかのXMLファイル。 だから私はそれが正しいURL、 だと仮定しますが、私のHTMLファイルでは動作しません。 誰もが何を間違って知っていますか?jsoneryからapi jquery何も表示されない

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 

$(function(){ 

    $.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     cache: false, 
     url: "https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144", 
     success: function(data) { 
      for (var i = 0; i < 10; i++) { 
       $("#pics").append("<a target='_blank' href='" + data.data[i].link + 
       "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>"); 
      } 
    }); 

}) 

</script> 
</head> 

<body> 

<div id="pics"> 

</div> 

</body> 
</html> 

答えて

3

[編集:以下のコメントごとに、このアドバイスは、もは​​や現在でないとフィドルは、もはや作業。時間が許せば、私はそれを修正する時間を見つけるかもしれません。そうでなければ、ちょうど注意してください]

あなたはちょうどいくつかのブレースを間違って配置しています。それは起こる。ブレークやタグの不一致を警告するIDEやその他のコード固有のエディタをまだ使用していない場合は、スイッチを作成する必要があります。

$(function() { 

    $.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     cache: false, 
     url: "https://api.instagram.com/v1/media/popular?client_id=84abd0d71cb14ad9885cf1dc59594144", 
     success: function(data) { 
      for (var i = 0; i < 10; i++) { 
       $("#pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url + "'></img></a>"); 
      } 
     } 
    }); 
}); 

フィドル:http://jsfiddle.net/KhW2E/

また、あなたはURLを入力すると、あなたには、いくつかのXMLを参照してくださいと言います。あなたが名前から期待しているように、あなたが見ているのはJSONです。正しい方法で対処していますが、人々が混乱しないように適切な用語を使用すると便利です。

+1

あなたの回答は、instagram API内のまばらなドキュメントJSONP(https://www.instagram.com/developer/endpoints/)の問題を解決するのに役立ちました。新しいバージョンのURLをhttps:// apiに置き換えました。 instagram.com/v1/tags/nofilter/media/recent?access_token = ACCESS_TOKEN'が動作します。ちょうどあなたのポストを更新するような気がするかもしれません(また、jsfiddleはAPI要求を行う方法がInstagramによって変更されているため動作しません)。 –

0

</body>の後にスクリプトを置いて、ajax呼び出しがdivを見つけるようにします。

+0

不要です。すでにjQueryドキュメント準備機能に入っています。 –

関連する問題