javascript - Get json, image url - Stack Overflow

admin管理员组

文章数量:1289540

I would like to some how query a url URL Here and then display the image result which looks like this

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

into a div (div id will be called images). I would need to replace this current code: as it does not load the image and I am not sure how to modify it to do so. Any help is appreciated, thanks.

var imageurl;
      $.get('.json?m=+value.hex', function (response) { 
        imageurl = response;
        if (imageurl == ""){
            $( "#images" ).attr('src', "imageerror.jpg");
        }
        else {
            $( "#images" ).attr('src', imageurl);

        }

      }); 

I would like to some how query a url URL Here and then display the image result which looks like this

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

into a div (div id will be called images). I would need to replace this current code: as it does not load the image and I am not sure how to modify it to do so. Any help is appreciated, thanks.

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

        }

      }); 

• javascript
• jquery
• html
• json

Share Improve this question Follow edited Aug 5, 2017 at 21:06 visit us at nzlocos.tk asked Aug 5, 2017 at 20:32 visit us at nzlocos.tkvisit us at nzlocos.tk 7511 gold badge11 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Changed up the variable name a tiny bit, but this should do what you need, you just need to access the image property from the object correctly. Also, check out the included codepen I created to simulate how to actually set an image somewhere with jquery.

$.get('http://www.airport-data./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

First of all, you're missing a closing quotation mark in your URL.

Second, the website doesn't allow you to put javascript in people's browsers and make requests to it. This is a cooperative design with browsers and websites. You can see this error if open the console when making the request.

XMLHttpRequest cannot load http://www.airport-data./api/ac_thumb.json?m=C822AF. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.' is therefore not allowed access.

Third, the response variable has more data to it than just what you've received. If you try this code:

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

Then open your Javascript console in your browser, you'll see the object in the log with nested information. If you add "json" as the third parameter, it will instead make response into the data that you want, like so:

$.get('http://www.airport-data./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"); 

But it wont work because the website doesn't allow cross domain stuff (unless you own it, and set it to allow your website).

get 'json' via '$.getJSON' . sample Link

$("#btn").on("click",function(){
var json='{"status":200,"count":1,"data":[{"image":"http:\/\/www.airport-data.\/images\/aircraft\/thumbnails\/001\/288\/001288330.jpg","link":"http:\/\/www.airport-data.\/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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" >click</button>
<img id="images" src=""/>

本文标签： javascriptGet jsonimage urlStack Overflow