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）

回答

相关问题