私は現在GET、特定のタグを持つ写真の束を取得するために instagram API にリクエストを作成し、Rails で取得した JSON オブジェクトを JS の呼び出し元に返し、img リンクとサムネイルなどで HTML を設定しています。 DOM。
奇妙なのは、サーバーを再起動した後、次のエラーが発生することです。
Failed to load resource: net::ERR_CONNECTION_REFUSED
instagram API によって返されるすべての写真ではなく、一部の写真のみが対象です。
var formdata = {tag: "myflsadventure"};
$.ajax({
url: "application/get_instagram_photos",
type: "POST",
datatype: 'json',
data: formdata,
success: function(response){
htmlz = "<div class='container'><div class='row'>";
count = 0;
rounded_style = " style='border:1px solid #; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;'"
$.each(response.data, function(i, item) {
if (count == 0 ){
htmlz += "<div class='col-md-6'><img src='"+item.images.standard_resolution.url+ "'" + rounded_style+"></div><div class='col-md-6'><div class='no-top'>";
count = count + 1;
}
else if (count == 9){
htmlz += "</div><div class='row'><div class='col-md-6'><div class='no-top'><div class='row'><div class='col-md-6'><img src='" + item.images.low_resolution.url+ "'" + rounded_style + "></div>";
count = count + 1;
}
else if (count == 13){
htmlz += "<div class='col-md-6'><img src='" + item.images.standard_resolution.url+ "'" + rounded_style + "></div></div></div>";
count = count + 1;
}
else if (count ==5){
htmlz += "</div><div class='row'><div class='col-md-3'><img src='" +item.images.low_resolution.url+ "'" +rounded_style+ "></div>";
count = count + 1;
}
else if ((count == 4) || (count == 12)){
htmlz += "<div class='col-md-6'><img src='"+item.images.low_resolution.url+ "'" + rounded_style +"></div></div></div></div></div>";
count = count + 1;
}
else if ((count == 6) || (count == 7) || (count == 8) ){
htmlz += "<div class='col-md-3'><img src='"+ item.images.low_resolution.url+ "'" + rounded_style + "></div>";
count = count + 1;
}
else if ((count == 3) || (count == 11)){
htmlz += "<div class='top'><div class='row'><div class='col-md-6'><img src='" + item.images.low_resolution.url + "'" + rounded_style + " ></div>";
count = count + 1;
}
else if ( count == 1){
htmlz += "<div class='row'><div class='col-md-6'><img src='" + item.images.low_resolution.url + "'" + rounded_style + " ></div>";
count = count + 1;
}
else{
htmlz += "<div class='col-md-6'><img src='"+ item.images.low_resolution.url+ "'"+ rounded_style + "></div></div>";
count = count + 1;
}
});
$("#myflsadventure").append(htmlz);
reapportion_les_fotos();
}
});
これが私のルートであり、最後にAPI呼び出しを行うコントローラーです
post '/application/get_instagram_photos', to: 'school_applications#get_instagram_photos'
コントローラー方式
def get_instagram_photos
respond_to do |format|
uri = URI("https://api.instagram.com/v1/tags/#{params[:tag]}/media/recent?client_id=myIDc&count=14")
response = Net::HTTP.get(uri)
format.json {render :json => response}
end
終わり
アップデート：
これは私の開発マシンでのみ発生しています。Heroku にプッシュして他のコンピューターから表示した後、メインの作業マシンを除いて、写真は正常に読み込まれます。ブラウザーに依存しない (Opera、Firefox、Safari、および Chrome を試した) ようで、adblock に依存しない (同様の SO 投稿で見つかった提案に従って、Chrome シークレットで試した)。