json, छवि यूआरएल

Question

मैं कुछ करना चाहते हैं कि कैसे एक यूआरएल URL Here क्वेरी और फिर चित्र परिणाम जो इस

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

     } 

     }); 

Answer 1

एक छोटा सा ऊपर बदली गई चर नाम है, लेकिन इस है कि तुम क्या जरूरत है क्या करना चाहिए, तो आप सिर्फ सही ढंग से वस्तु से छवि संपत्ति का उपयोग करने की जरूरत है। साथ ही, 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 में एक बंद उद्धरण चिह्न वंचित रह जाएंगे।

दूसरा, वेबसाइट आपको लोगों के ब्राउज़र में जावास्क्रिप्ट डालने और इसके लिए अनुरोध करने की अनुमति नहीं देती है। यह ब्राउज़र और वेबसाइटों के साथ एक सहकारी डिजाइन है। अनुरोध करते समय कंसोल खोलने पर आप यह त्रुटि देख सकते हैं।

XMLHttpRequest http://www.airport-data.com/api/ac_thumb.json?m=C822AF लोड नहीं कर सकता है। अनुरोधित संसाधन पर 'पहुंच-नियंत्रण-अनुमति-उत्पत्ति' शीर्षलेख मौजूद नहीं है। उत्पत्ति '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

'$ .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=""/>