나는 방법 https://api.flickr.com/services/feeds/photos_public.gne의 플리커 API 서비스 페이지에 한계 매개 변수를 찾지 못했습니다.
그러나 for 루프에서 인쇄 된 결과를 제한 할 수 있습니다. 어쨌든 백그라운드에서 https://api.flickr.com/services/feeds/photos_public.gne 메소드의 모든 결과를 계속 가져옵니다. 이 같은
뭔가 :
(function() {
var form = document.getElementById("form");
form.onsubmit = function(e) {
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?", window.jsonFlickrFeed);
e.preventDefault();
};
})();
window.jsonFlickrFeed = function(data) {
var i, len = data.items.length, html = "", limit = document.getElementById("txtLimit").value * 1;
for (i = 0; i < limit; i++) {
html += "<img src=\"";
html += data.items[i].media.m;
html += "\" />";
}
document.getElementById("list").innerHTML = html;
};
#list {
border: solid 1px #ccc;
}
#results img {
padding: 5px;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form">
<label for="txtLimit">Limit:</label>
<input id="txtLimit" min="0" type="number" value="0" />
<button type="submit">Send</button>
<hr />
<div id="list"></div>
</form>
업데이트 :
이되지 자바 스크립트 XMLHttpRequest와 jQuery를 왜 작동 이유는 무엇입니까?
jQuery.getJSON()이 스크립트와 같은 리소스를 얻고 있기 때문에. 
또한 응답 헤더에는 Access-Control-Allow-Origin: *이 없지만이 경우에는 문제가되지 않습니다.
<script src="https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?" type="text/javascript"></script>
가 content-type: application/javascript;를 참조하십시오 : 그것은 사용하여 요청할 수 있습니다 스크립트입니다.
{
"title": "Recent Uploads tagged rat",
"link": "https:\/\/www.flickr.com\/photos\/tags\/rat\/",
"description": "",
"modified": "2017-10-30T15:46:12Z",
"generator": "https:\/\/www.flickr.com",
"items": [
{
"title": "Garvey Fisherman",
"link": "https:\/\/www.flickr.com\/photos\/gid617\/37544497166\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4468\/37544497166_06b2812faa_m.jpg"
},
"date_taken": "2017-10-06T16:05:11-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/gid617\/\">gid617<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/gid617\/37544497166\/\" title=\"Garvey Fisherman\"><img src=\"https:\/\/farm5.staticflickr.com\/4468\/37544497166_06b2812faa_m.jpg\" width=\"240\" height=\"210\" alt=\"Garvey Fisherman\" \/><\/a><\/p> <p>"If it swims, I'll catch it!"<br \/> This Garvey Fisherman is sure to always be found in or on the water. Fishing is more than his job, it's his passion! He dreams of walking into Kieg one day with the Kraaken on the end of his line!<br \/> <br \/> Overviews of the whole BoBS series: <a href=\"https:\/\/www.flickr.com\/photos\/gid617\/37561290702\/in\/photostream\">(1)<\/a> <a href=\"https:\/\/www.flickr.com\/photos\/gid617\/36923208713\/in\/photostream\">(2)<\/a><\/p>",
"published": "2017-10-30T15:46:12Z",
"author": "[email protected] (\"gid617\")",
"author_id": "[email protected]",
"tags": "lego minifigures eurobricks bobs eslandola corrington sea rat oleon"
},
{
"title": "https:\/\/t.co\/jocRzPrIlh http:\/\/ift.tt\/2yXuiur",
"link": "https:\/\/www.flickr.com\/photos\/[email protected]\/6894\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4493\/6894_e92604698f_m.jpg"
},
"date_taken": "2017-10-30T07:55:49-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/[email protected]\/\">rickylavendergold<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/[email protected]\/6894\/\" title=\"https:\/\/t.co\/jocRzPrIlh http:\/\/ift.tt\/2yXuiur\"><img src=\"https:\/\/farm5.staticflickr.com\/4493\/6894_e92604698f_m.jpg\" width=\"159\" height=\"240\" alt=\"https:\/\/t.co\/jocRzPrIlh http:\/\/ift.tt\/2yXuiur\" \/><\/a><\/p> <p>via Tumblr <a href=\"http:\/\/ift.tt\/2zih52h\" rel=\"nofollow\">ift.tt\/2zih52h<\/a><\/p>",
"published": "2017-10-30T14:55:49Z",
"author": "[email protected] (\"rickylavendergold\")",
"author_id": "[email protected]",
"tags": "ratties ifttt facebookpages facebook page rat rats rattie fluff rattieflu"
},
{
"title": "At the fetish market",
"link": "https:\/\/www.flickr.com\/photos\/carsten_tb\/24188861808\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4457\/24188861808_d542f1f308_m.jpg"
},
"date_taken": "2017-01-09T10:28:22-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/carsten_tb\/\">10b travelling<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/carsten_tb\/24188861808\/\" title=\"At the fetish market\"><img src=\"https:\/\/farm5.staticflickr.com\/4457\/24188861808_d542f1f308_m.jpg\" width=\"240\" height=\"160\" alt=\"At the fetish market\" \/><\/a><\/p> <p>The Akodessawa Fetish Market or Marche des Feticheurs at Akodessawa, a district of Lom\u00e9, Togo in West Africa, is the world's largest vodou \/ vodoun\/ voodoo fetish market.<br \/> <br \/> The market features monkey heads, skulls, dead birds, crocodiles, skins and other products of dead animals. It is visited by healers \/ guerisseurs from around West Africa.<\/p>",
"published": "2017-10-30T14:59:52Z",
"author": "[email protected] (\"10b travelling\")",
"author_id": "[email protected]",
"tags": "10btravelling 2017 africa african afrika afrique akodessewa akodessewafetishmarket carstentenbrink feticheurs fetishmarket genericplaces gulfofguinea iptcbasic lome lom\u00e9 marchedesfeticheurs otherkeywords places republic r\u00e9publiquetogolaise togo togolais togolaise togoland togolese westafrica africaine animal dead fetiches fetish guerisseur healer march\u00e9 market pigeon rat snakes tenbrink traditionalmedicine turtle vodou vodoun voodoo"
},
{
"title": "https:\/\/t.co\/yrLeXdQYkh http:\/\/ift.tt\/2zQIggU",
"link": "https:\/\/www.flickr.com\/photos\/[email protected]\/26261755469\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4488\/26261755469_bf3987f390_m.jpg"
},
"date_taken": "2017-10-30T05:35:37-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/[email protected]\/\">rickylavendergold<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/[email protected]\/26261755469\/\" title=\"https:\/\/t.co\/yrLeXdQYkh http:\/\/ift.tt\/2zQIggU\"><img src=\"https:\/\/farm5.staticflickr.com\/4488\/26261755469_bf3987f390_m.jpg\" width=\"160\" height=\"240\" alt=\"https:\/\/t.co\/yrLeXdQYkh http:\/\/ift.tt\/2zQIggU\" \/><\/a><\/p> <p>via Tumblr <a href=\"http:\/\/ift.tt\/2gMmweo\" rel=\"nofollow\">ift.tt\/2gMmweo<\/a><\/p>",
"published": "2017-10-30T12:35:37Z",
"author": "[email protected] (\"rickylavendergold\")",
"author_id": "[email protected]",
"tags": "ratties ifttt facebookpages facebook page rat rats rattie fluff rattieflu"
},
{
"title": "https:\/\/t.co\/Te2wafkGKL http:\/\/ift.tt\/2hmiyKj",
"link": "https:\/\/www.flickr.com\/photos\/[email protected]\/38036736941\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4460\/38036736941_b4d6097e6f_m.jpg"
},
"date_taken": "2017-10-30T04:35:07-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/[email protected]\/\">rickylavendergold<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/[email protected]\/38036736941\/\" title=\"https:\/\/t.co\/Te2wafkGKL http:\/\/ift.tt\/2hmiyKj\"><img src=\"https:\/\/farm5.staticflickr.com\/4460\/38036736941_b4d6097e6f_m.jpg\" width=\"180\" height=\"240\" alt=\"https:\/\/t.co\/Te2wafkGKL http:\/\/ift.tt\/2hmiyKj\" \/><\/a><\/p> <p>via Tumblr <a href=\"http:\/\/ift.tt\/2zRw1kd\" rel=\"nofollow\">ift.tt\/2zRw1kd<\/a><\/p>",
"published": "2017-10-30T11:35:07Z",
"author": "[email protected] (\"rickylavendergold\")",
"author_id": "[email protected]",
"tags": "ratties ifttt facebookpages facebook page rat rats rattie fluff rattieflu"
},
{
"title": "http:\/\/ift.tt\/2yWEOlD",
"link": "https:\/\/www.flickr.com\/photos\/[email protected]\/38035504481\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4459\/38035504481_17fc95cdbe_m.jpg"
},
"date_taken": "2017-10-30T03:20:25-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/[email protected]\/\">rickylavendergold<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/[email protected]\/38035504481\/\" title=\"http:\/\/ift.tt\/2yWEOlD\"><img src=\"https:\/\/farm5.staticflickr.com\/4459\/38035504481_17fc95cdbe_m.jpg\" width=\"240\" height=\"160\" alt=\"http:\/\/ift.tt\/2yWEOlD\" \/><\/a><\/p> <p>via Tumblr <a href=\"http:\/\/ift.tt\/2gVsiy7\" rel=\"nofollow\">ift.tt\/2gVsiy7<\/a><\/p>",
"published": "2017-10-30T10:20:25Z",
"author": "[email protected] (\"rickylavendergold\")",
"author_id": "[email protected]",
"tags": "ratties ifttt facebookpages facebook page rat rats rattie fluff rattieflu"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/37981347146\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4514\/37981347146_ffa7f1418f_m.jpg"
},
"date_taken": "2017-07-16T11:34:22-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/37981347146\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4514\/37981347146_ffa7f1418f_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:28Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/37981370436\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4494\/37981370436_e993b1100f_m.jpg"
},
"date_taken": "2017-07-16T11:33:43-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/37981370436\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4494\/37981370436_e993b1100f_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:26Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/24182616908\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4462\/24182616908_fc758c60e9_m.jpg"
},
"date_taken": "2017-07-16T11:02:37-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/24182616908\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4462\/24182616908_fc758c60e9_m.jpg\" width=\"240\" height=\"123\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:23Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/26258726769\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4462\/26258726769_94681d14e4_m.jpg"
},
"date_taken": "2017-07-16T11:01:58-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/26258726769\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4462\/26258726769_94681d14e4_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:22Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/38034718591\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4502\/38034718591_6c6c464481_m.jpg"
},
"date_taken": "2017-07-16T10:47:27-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/38034718591\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4502\/38034718591_6c6c464481_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:18Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/38034728141\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4499\/38034728141_e7a04cfd09_m.jpg"
},
"date_taken": "2017-07-16T10:31:09-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/38034728141\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4499\/38034728141_e7a04cfd09_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:17Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/24182612888\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4448\/24182612888_6071699663_m.jpg"
},
"date_taken": "2017-07-16T11:11:20-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/24182612888\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4448\/24182612888_6071699663_m.jpg\" width=\"240\" height=\"209\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:24Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/26258719859\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4481\/26258719859_77e62e29e3_m.jpg"
},
"date_taken": "2017-07-16T11:20:02-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/26258719859\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4481\/26258719859_77e62e29e3_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:25Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/26258708999\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4485\/26258708999_68130d47d4_m.jpg"
},
"date_taken": "2017-07-16T11:20:05-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/26258708999\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4485\/26258708999_68130d47d4_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:26Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/38004222102\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4510\/38004222102_ce27392ebd_m.jpg"
},
"date_taken": "2017-07-16T10:29:36-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/38004222102\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4510\/38004222102_ce27392ebd_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:16Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/38004201422\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4497\/38004201422_fa17f93ed7_m.jpg"
},
"date_taken": "2017-07-16T10:47:35-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/38004201422\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4497\/38004201422_fa17f93ed7_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:19Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/37326104584\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4504\/37326104584_6a1a8118c1_m.jpg"
},
"date_taken": "2017-07-16T11:13:39-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/37326104584\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4504\/37326104584_6a1a8118c1_m.jpg\" width=\"240\" height=\"165\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:24Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/37326095364\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4476\/37326095364_d30e7e470a_m.jpg"
},
"date_taken": "2017-07-16T11:39:55-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/37326095364\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4476\/37326095364_d30e7e470a_m.jpg\" width=\"240\" height=\"134\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:29Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
},
{
"title": "TRUCK'N",
"link": "https:\/\/www.flickr.com\/photos\/wifithai\/37981363196\/",
"media": {
"m": "https:\/\/farm5.staticflickr.com\/4455\/37981363196_209b6be505_m.jpg"
},
"date_taken": "2017-07-16T11:34:15-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wifithai\/\">*SIN CITY*<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wifithai\/37981363196\/\" title=\"TRUCK'N\"><img src=\"https:\/\/farm5.staticflickr.com\/4455\/37981363196_209b6be505_m.jpg\" width=\"240\" height=\"160\" alt=\"TRUCK'N\" \/><\/a><\/p> <p>Australia<\/p>",
"published": "2017-10-30T09:40:27Z",
"author": "[email protected] (\"*SIN CITY*\")",
"author_id": "[email protected]",
"tags": "truck transport ford gmc dodge vehicle lowrider 7d canon rusty custom hotrod hotrods oldschool oldsmobile backtobrunswick kool cool australia americancarsinaustralia queensland nsw power horsepower chev chevy chevrolete 48 34 32 taillights international wheels ride rat rod usa kustom hot street carshow zephyr v8"
}
]
}
:
이 URL의 대응 파라미터는 JSON (J 아바 S cript O N otation bject)이다 jsonFlickrFeed(Object parameter)라는 함수
자, 함수 jsonFlickrFeed({})을 실행하기 위해 script 태그를 사용하여 url을 호출하는 함수가 필요합니다.
데모 : 기본 자바 스크립트 + JSONP :
(function() {
function request(url, callback) {
var head = document.head, script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
head.appendChild(script);
// Remove the script tag after it's loaded once.
script.onload = function() {
this.remove();
};
window[callback] = function(data) {
var i, len = data.items.length,
html = "",
limit = document.getElementById("txtLimit").value * 1;
for (i = 0; i < limit; i++) {
html += "<img src=\"";
html += data.items[i].media.m;
html += "\" />";
}
document.getElementById("list").innerHTML = html;
};
}
var form = document.getElementById("form");
form.onsubmit = function(e) {
e.preventDefault();
var url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?";
request(url, "jsonFlickrFeed"); // jsonFlickrFeed is the function which is returned from the URL.
};
})();
#list {
border: solid 1px #ccc;
}
#results img {
padding: 5px;
width: 50%;
}
<form id="form">
<label for="txtLimit">Limit:</label>
<input id="txtLimit" min="0" type="number" value="0" />
<button type="submit">Send</button>
<hr />
<div id="list"></div>
</form>
안녕 @Tranquillity, 당신은 당신이 달성 된 코드를 귀하의 질문을 업데이트 할 수 있습니다? –
@ DannyFardyJhonstonBermúdez 샘플 코드로 질문을 업데이트했습니다. 여기에 항목의 길이가 20임을 알 수 있습니다. – Tranquillity