获取JSON，图像URL

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

{"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（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); 

     } 

     });

来源

2017-08-05 visit us at nzlocos.tk

改变了变量名一点点，但是这应该做你需要什么，你只需要从对象正确地访问图像属性。另外，请查看我创建的附带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

来源

2017-08-05 20:49:24

如果你是在本地机器上测试这个，你可能会得到一个CORS问题，这将不会允许您访问为好，但毕竟是在范围之外你的问题。这将工作，如果你有访问权限。 –

感谢我使用Zuver为我的托管信息将这是一个问题？我正在使用crossingorgign.me，但他们在过去几天一直有服务器问题，所有其他Cors代理的更改JSON格式的任何想法，请好吗？ –

好吧，你甚至可能不会有这个问题，你只是试图错误地设置图像。用开放式工具打开浏览器刷新浏览器，然后看看你有一个控制台错误，看起来像这样。显然你的错误不会像图片一样，但它应该让你知道要寻找什么。 https://lh3.googleusercontent.com/-IWB9szEnSqA/VhbOrINNedI/AAAAAAAC_Po/WwQ9C-IKVUg/s1600/2015-10-08%2B13_13_50-Store.png –

首先，你错过了你的URL右引号。

其次，网站不允许你把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");

，但它不会工作，因为该网站不允许跨域的东西（除非你拥有它，并将其设置为允许您的网站）。

来源

2017-08-05 20:59:07

是的，谢谢你指出这一点我将使用Cors代理。 –

通过'$ .getJSON'获取'json'。 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=""/>

来源

2017-08-05 21:02:37

谢谢！求助！ –

获取JSON，图像URL

回答

相关问题