flickr api поиск не отображает изображения

Когда я нажимаю кнопку поиска и просматриваю вкладку net в firebug, это показывает, что объекты JSON возвращаются, но я не могу заставить их загружать их в свой браузер для просмотра. Если я объединю части «var url» в адресной строке, он также работает. Я думаю, что ошибка может иметь какое-то отношение к последней функции, но я не могу понять это.flickr api поиск не отображает изображения

<!doctype html> 
<html class="no-js" lang=""> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <style> 
    img { 
    height: 100px; 
    float: left; 
    } 
    #images{ 
    width: 100%; 
    } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 
    <input type="text" id="flickrInput"> 
    <button id="flickrSearch">Search Photos</button> 
    <div id="images"></div>  
<script> 
    $(document).ready(function() { 
    $("#flickrSearch").click(function (event) { 
     var searchVal = $("#flickrInput").val(); 
     var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a"; 
     $.getJSON(flickrAPI, { 
     tags: searchVal, 
     per_page: 25, 
     format: "json" 
     }, 
     function(data) { 
     $.each(data.items, function(i, item) { 
      var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg'; 
     $('#images').append('<img src="' + url + '"/>'); 
     }); 
    }); 
    });  
}); 
</script> 
</body> 
</html>

источник

2015-07-12 user5108240

код работает и выполняет запрос. Но ответ Flicks недействителен JSON: '' jsonFlickrApi ({"photos": {"page": 1, "pages": 12207, "perpage": 25, "total": "305156", "photo": [ { "ID": "19639656861", "владелец": "30271324 @ N07", "секрет": "0280357dc4", "сервер": "260", "ферма": 1, "название": "193_12.07.2015_Sommer "," ispublic ": 1," isfriend ": 0," isfamily ": 0}/*, ... * /]}," stat ":" ok "})". Кажется, что API был изменен, и пример стал недействительным. –

ok Я изменил var flickrAPI на 'var flickrAPI =" https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1 ";' удалить оболочку функции ... все еще не работает. – user5108240

Похоже, что API Flickr был изменен, и ваш пример устарел.

Вам просто нужно выяснить, какие данные поступают из API с помощью консоли разработчика Google Chrome или с помощью контрольных точек и часов.

enter image description here

Существует рабочий фрагмент кода:

$(document).ready(function() { 
 
    $("#flickrSearch").click(function (event) { 
 
     var searchVal = $("#flickrInput").val(); 
 
     var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1"; 
 
     $.getJSON(flickrAPI, { 
 
     tags: searchVal, 
 
     per_page: 25, 
 
     format: "json" 
 
     }, 
 
     function(data) { 
 
     $.each(data.photos.photo, function(i, item) { 
 
      var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg'; 
 
     $('#images').append('<img src="' + url + '"/>'); 
 
     }); 
 
    }); 
 
    });  
 
});

img { 
 
    height: 100px; 
 
    float: left; 
 
    } 
 
    #images{ 
 
    width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <input type="text" id="flickrInput"> 
 
    <button id="flickrSearch">Search Photos</button> 
 
    <div id="images"></div>

источник

2015-07-12 16:54:47

Он отлично работает и благодарит вас за подробный ответ. Вы не поверили бы мне, но я подумал об этом раньше и возвращался сюда, чтобы опубликовать об этом, но ваш ответ выглядит лучше, чем все, что я бы сделал. Еще раз спасибо/ – user5108240

flickr api поиск не отображает изображения

ответ

Смежные вопросы