Flickr API 加载图像答案

【问题标题】：Flickr API loading imagesFlickr API 加载图像
【发布时间】：2017-05-08 15:58:08
【问题描述】：

您好，我是 API 新手，在使用 Flickr API 时遇到了很多困难。我尝试查找视频和文章，结果令人不知所措。我想要为我的项目做的是让用户使用 Yelp API 搜索餐馆。一旦他们获得餐馆列表，每个列表项都会有一个选择按钮。当用户单击选择按钮时，该位置的图像应在 HTML 页面的 div 中弹出。我设法让 Yelp API 工作，但是我正在努力解决如何在用户单击选择按钮时加载图像。我完全迷失了，任何帮助将不胜感激。下面是我的代码。

HTML：

<div class="col-xs-6">
    <h2 id="title">Manhattan</h2>
    <div>
    <h2>Photos</h2>
    <div id="photos"></div>
    </div>
  </div>

JavaScript：

$(document).ready(function () {
    $('#getposts_form').submit(function(event) {

    event.preventDefault();

    $('#output').empty();

    var search = $('#search').val();
    var title = $('#title').text();
    var categories = $('#categories').val();
    var price = $("#price").val();
    console.log(search);
    console.log(categories);
    console.log(price);


    $("#ajaxIndicator").modal('show');

    // make the ajax request
    $.ajax({
        url: 'yelp.php',
        type: 'GET',
        dataType: 'JSON',
        data: {
            location: title,
            categories: categories,
            price: price
        },

        success: function(serverResponse) {
            console.log(serverResponse);
            var businesses = serverResponse.businesses;
            console.log(businesses);
            var myHTML = '';
            for(var i = 0; i < serverResponse.businesses.length; i++){
                myHTML += '<li class="tweet list-group-item">';
                myHTML += '<ul class="list">'
                myHTML += '<li><span class="user"><b>' + serverResponse.businesses[i].name + '</b></span></li>';
                myHTML += '<li><span class="user">' + serverResponse.businesses[i].price + '</span></li>'; 
                myHTML += '<li><span class="user">' + serverResponse.businesses[i].latitude + '</span></li>'; 
                myHTML += '<li><span class="user">' + JSON.stringify(serverResponse.businesses[i].categories) + '</span></li>'; 
                myHTML += '<li><span class="user"><button class="btn btn-default" type="submit" id="select">Select</button></span><li>';    
                myHTML += '</ul>'
                myHTML += '</li>';
            }
            $('#output').append(myHTML);
        },

        error: function(jqXHR, textStatus, errorThrown) {
            console.log('error');
            console.log(errorThrown);
            console.log(jqXHR);
        },


        complete: function() {
            $("#ajaxIndicator").modal('hide');
        }
    });



});

//ajax call for flickr api
$('.select').submit(function(event) {

    event.preventDefault();

    $('#photos').empty();

    var lat = $('#lat').val();
    var long = $('#long').val();



    $("#ajaxIndicator").modal('show');

    make the ajax request
    $.ajax({
        url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="here i added my own key"&format=json&nojsoncallback=1',
        type: 'GET',
        dataType: 'JSON',
        data: {
            //lat: lat,
            //long:long,
        },

        success: function(serverResponse) {

            console.log("flickr");
            console.log(data);
        },

        error: function(jqXHR, textStatus, errorThrown) {
            console.log('error');
            console.log(errorThrown);
            console.log(jqXHR);
        },


        complete: function() {
            $("#ajaxIndicator").modal('hide');
        }
    });

});

【问题讨论】：

标签： javascript jquery html ajax flickr

【解决方案1】：

你需要做的是

提取 url 并将它们存储在一个数组中

遍历数组，创建一个正确设置src的新子图像

var photos = $("#photos")

for (var i = 0; i < arr.length; i++) {
    var image = "<img src=" + encodeURL(arr[i]) + "></img>"
    photos.append(image)
}

我认为你暂时应该专注于更简单的api

【讨论】：