Question

我想问一下如何查询网址URL Here，然后显示看起来像这样的图像结果

UUID

进入div（div id将被称为图像）。我需要替换当前的代码：因为它没有加载图像，我不知道如何修改它来这样做。感谢任何帮助。谢谢。

{"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"
  }]
}

Answer 1

稍微改变了变量名称，但是这应该做你需要的，你只需要正确地从对象访问image属性。另外，查看我创建的包含的codepen，以模拟如何使用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

首先，您错过了网址中的右引号。

其次，该网站不允许您将JavaScript放在人们的浏览器中并向其发出请求。这是与浏览器和网站的合作设计。如果在发出请求时打开控制台，您可以看到此错误。

XMLHttpRequest无法加载http://www.airport-data.com/api/ac_thumb.json?m=C822AF。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://www.example.com”访问。

第三，response变量包含的数据多于您收到的数据。如果您尝试此代码：

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

然后在浏览器中打开Javascript控制台，您将在日志中看到包含嵌套信息的对象。如果你将“json”添加为第三个参数，它会将response转换为你想要的数据，如下所示：

$.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");

但它不会起作用，因为该网站不允许跨域内容（除非您拥有它，并将其设置为允许您的网站）。

Answer 3

得到＆＃39; json＆＃39;通过＆＃39; $。getJSON＆＃39; 。 sample Link

＆＃13;

$("#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);

        }
});

＆＃13;

<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=""/>

＆＃13;

获取json，图片网址

3 个答案: