Flickr API加載圖像

你好，我是API的新手，並且我爲Flickr API掙扎了很多。我試圖查看視頻和文章，這是壓倒性的。我想爲我的項目做的是讓用戶使用Yelp API搜索餐館。一旦他們得到餐館列表，每個列表項目將有一個選擇按鈕。當用戶點擊選擇按鈕時，該位置的圖像應該彈出在HTML頁面的div上。我設法讓Yelp API正常工作，但是當用戶點擊選擇按鈕時，我正在努力如何使圖像加載。我完全失去了任何幫助，將不勝感激。以下是我的代碼。Flickr 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'); 
     } 
    }); 

});

來源

2017-05-08 Jamie

你需要做的是

提取網址，並將其存儲在一個數組

循環通過arr唉，創建與SRC新的子圖像正確

var photos = $("#photos") 

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

我認爲，你應該專注於簡單的API暫且

設置

來源

2017-05-08 16:16:19 Blaze349

Flickr API加載圖像

回答

相關問題