Flickr API標籤搜索（jQuery/ajax）

所以我有一個簡單的搜索表單在我的文檔的頂部是標籤的標籤。它看起來像這樣：Flickr API標籤搜索（jQuery/ajax）

<div id="search"> 
    <form id="srch"> 
     <input type="text" placeholder="No filthy keywords pls." id="sbx"/> 
      <a href="" type="submit" id="btn"><i class="fa fa-search"></i></a> 
    </form> 
</div>

而且我希望用戶標籤寫入到「搜索」領域，他按下時提交按鈕它會根據他提供的標籤的照片和從Flickr提取照片用它們填充＃容器div。 jQuery的我至今看起來是這樣的：

var searchTerm = $("#sbx").val(); 
var Flickurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=376b144109ffe90065a254606c9aae3d&"; 
var tags = "&tags=" + searchTerm; 
var tagmode = "&tagmode=any"; 
var jsonFormat = "&format=json"; 
var FinalURL = Flickurl + tags + tagmode + jsonFormat; 

$(document).ready(function() { 
     $("#btn").click(function(event){ 
      $.getJSON('FinalURL', function(photo) { 
      $('#content').append('<img src="' + 'https://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '"/>'); 
      }); 
     }); 
    });

我找不到任何幫助的任何地方，我這樣做是爲學校的項目，我也從來不曾做過任何與API的我想我誤解的東西在jQuery和API文件，因爲這是沒有做任何事情都大聲笑..

如果有人可以幫助我這個，我會超級開心，我覺得代碼應該是好的，但也許我是錯過了一些小..？

來源

2014-10-21 Jan Dočekal

您獲取字符串「FinalURL」，這將被解析爲CURRENT_URL/FinalURL，試試這個

$.getJSON(FinalURL, ... (without the quotes ')

好吧，我發現了一些其他錯誤太多。

將您的var jsonFormat更改爲此"&format=json&nojsoncallback=1"以從api獲取jsonrawdata。
傳回的JSON是不是一張照片，這是所有照片的列表，所以要獲得一個照片，你必須這樣做：response.photos.photo[NUMBER]
您的網址指向一個Flickr的網頁，而不是圖像源，它應該是這樣的：https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg

我定你的錯誤，在此琴：JSFiddle

來源

2014-10-21 22:54:08

非常感謝你爲應對這一點，終於讓我感動的地方，現在我只是有這樣它一次加載更多的圖像進行調整:)但嚴重感謝你這麼許多！我在這裏站了很久，我欠你一杯啤酒。我顯然不明白如何從json中提取數據我只是以爲我可以直接訪問它，但顯然不是：S非常感謝！ – 2014-10-22 13:39:18

-1

像這樣的事情會工作。你只需要改變你將url查詢填入javascript對象的方式。

http://jsfiddle.net/669jy9am/

顯然，這將不工作的jsfiddle，但如果你將它放入自己的網頁，它應該工作。

<div id="search"> 
<form class="search--form"> 
    <input type="text" placeholder="No filthy keywords pls." id="sbx" /> 
    <button type="submit" id="btn">Search<i class="fa fa-search"></i> 

    </button> 
</form>

function searchFlickr() { 
var searchTerm = $("#sbx").val(); 
var Flickurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=376b144109ffe90065a254606c9aae3d&"; 



$("form").submit(function (event) { 
    event.preventDefault(); 
    var searchTerm = $('#sbx').val(); 
    $.ajax({ 
     url: 'Flickrurl', 
     data: { 
      format: "json", 
      jsoncallback: 1, 
      tags: searchTerm 
     }, 
    }).done(function (data) { 
     //Populate the images with the data 
    }); 
}); 
} 

$(document).ready(function() { 
    searchFlickr(); 
});

來源

2014-10-21 22:58:04 LindleyW

他的方式填充網址是有效的，雖然這看起來更好:)。這仍然只是提取字符串'Flickrurl'。 – 2014-10-21 23:42:06

Flickr API標籤搜索（jQuery/ajax）

回答

相關問題