JSON、画像のURL

Question

を取得し、私はいくつかの方法URL URL Hereを照会したいと、その後のdivにこの

{"status":200,"count":1,"data":[{ 
    "image":"http:\/\/www.airport-data.com\/images\/aircraft\/thumbnails\/001\/288\/001288330.jpg", 
    "link":"http:\/\/www.airport-data.com\/aircraft\/photo\/001288330.html", 
    "photographer":"magnaman" 
    }] 
} 

のように見える（のdiv idはイメージと呼ばれます）画像の結果を表示していました。私はこの現在のコードを置き換える必要があります：それはイメージをロードしていないと私はそうするためにそれを変更する方法がわかりません。どんな助けでも感謝しています。

var imageurl; 
     $.get('http://www.airport-data.com/api/ac_thumb.json?m=+value.hex', function (response) { 
     imageurl = response; 
     if (imageurl == ""){ 
      $("#images").attr('src', "imageerror.jpg"); 
     } 
     else { 
      $("#images").attr('src', imageurl); 

     } 

     }); 

Answer 1

変数名を少し変更しましたが、これは必要な処理を行う必要があります。オブジェクトのimageプロパティに正しくアクセスする必要があります。また、実際にjqueryでイメージを設定する方法をシミュレートするために作成したインクルードコードを確認してください。

$.get('http://www.airport-data.com/api/ac_thumb.json?m=C822AF', function(res) { 
    var imgUrl = res.data[0].image 

    if (imgUrl == "") { 
     $("#images").attr('src', "imageerror.jpg"); 
    } else { 
     $("#images").attr('src', imgUrl); 
    } 
}) 

https://codepen.io/DZuz14/pen/rzjxEO?editors=1010

Answer 2

まず第一に、あなたはあなたのURLである二重引用符を逃しています。

第2に、ウェブサイトでは、ユーザーのブラウザにJavaScriptを入れてリクエストすることはできません。これはブラウザとウェブサイトとの協調設計です。要求を行うときにコンソールを開くと、このエラーが表示されます。

XMLHttpRequestはhttp://www.airport-data.com/api/ac_thumb.json?m=C822AFをロードできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://www.example.com'はアクセスできません。

第3に、response変数には、受信したものよりも多くのデータがあります。このコードを試してみると：

$.get('http://www.airport-data.com/api/ac_thumb.json?m='+value.hex, function (response) { 
    console.log(response); 
}); 

ブラウザでJavascriptコンソールを開くと、ネストされた情報を含むオブジェクトがログに表示されます。ウェブサイトがあなたの場合を除き、クロスドメインのものを（許可されていませんので、

$.get('http://www.airport-data.com/api/ac_thumb.json?m='+value.hex, function (response) { 
    console.log(response); 
    imageurl = response.data[0].link; 
    if (imageurl == "") 
     $("#images").attr('src', "imageerror.jpg");   
    else 
     $("#images").attr('src', imageurl); 

}, "json"); 

しかし、文句を言わない仕事：あなたは三番目のパラメータとして「JSON」を追加した場合、それは代わりにそうように、必要なデータにresponseを行いますあなたのウェブサイトを許可するように設定してください）。

Answer 3

get 'json' via '$ .getJSON'。あなたがローカルマシン上でこれをテストしている場合sample Link

$("#btn").on("click",function(){ 
 
var json='{"status":200,"count":1,"data":[{"image":"http:\/\/www.airport-data.com\/images\/aircraft\/thumbnails\/001\/288\/001288330.jpg","link":"http:\/\/www.airport-data.com\/aircraft\/photo\/001288330.html","photographer":"magnaman"}]}'; 
 
     var obj = jQuery.parseJSON(json); 
 
     imageurl = obj.data[0].image; 
 
     if (imageurl == ""){ 
 
      $("#images").attr('src', "imageerror.jpg"); 
 
     } 
 
     else { 
 
      $("#images").attr('src', imageurl); 
 

 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn" >click</button> 
 
<img id="images" src=""/>