Flickr API标签搜索（jQuery / ajax）

Question

所以我在我的文档顶部有一个简单的搜索表单，用于标记。它看起来像这样：

<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获取照片并填充 #container div < / strong>和他们一起到目前为止我的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文档中误解了一些东西，因为这根本没有做任何事情洛尔..

如果有人可以帮助我，我会非常高兴，我觉得代码应该很好，但也许我错过了一些小的东西......？

Answer 1

您正在获取字符串'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

Answer 2

这样的东西会起作用。您只需要更改将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();
});