Question

您好我是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');
        }
    });

});

Answer 1

您需要做的是

提取网址并将其存储在数组

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

var photos = $("#photos")

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

我认为你应该暂时关注更简单的apis

Flickr API加载图片

1 个答案: