1
안녕하세요 저는 API에 새로운 오전과 내가 플리커 API로 많은 어려움을 겪고 있어요. 나는 비디오와 기사를 보려고 노력했고 압도적이었다. 내 프로젝트를 위해 무엇을하려하는지 Yelp API를 사용하여 레스토랑을 검색하는 사용자가 있습니다. 식당 목록을 얻으면 각 목록 항목에 선택 버튼이 생깁니다. 사용자가 선택 버튼을 클릭하면 해당 위치의 이미지가 HTML 페이지의 div에 팝업됩니다. 나는 Yelp API를 사용할 수 있도록 관리하지만 사용자가 선택 버튼을 클릭 할 때 이미지를로드하는 방법에 어려움을 겪고 있습니다. 나는 완전히 잃어 버렸고 어떤 도움을 주시면 감사하겠습니다. 아래는 제 코드입니다.플리커 API 로딩 이미지
HTML :
<div class="col-xs-6">
<h2 id="title">Manhattan</h2>
<div>
<h2>Photos</h2>
<div id="photos"></div>
</div>
</div>
자바 스크립트 :
$(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');
}
});
});