Muatkan gambar Flickr menggunakan API JSONP

Artikel ini terakhir dikemas kini 23 Jun 2016, dengan semakan kod, demo codepen, dan pemformatan yang lebih baik.

Flickr, platform milik Yahoo untuk berkongsi foto dan video, menyediakan API awam untuk mendapatkan senarai foto berdasarkan kriteria tertentu.

Untuk menerima respons API yang diformat JSON, masukkan parameter

dalam permintaan anda. Sebagai contoh, ini mengambil gambar yang ditandakan "Kitten": format=json

<code>https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json</code>

pertanyaan API Flickr ini tidak memerlukan pengesahan. Senarai lengkap parameter boleh didapati di sini:

https://www.php.cn/link/b1370fcd515bccf46591ed09a543d21b . Struktur Objek Flickr JSON

respons flickr json tipikal kelihatan seperti ini:

mengambil gambar flickr dengan JSONP API

jsonFlickrFeed({
  "title": "Recent Uploads tagged kitten",
  "link": "http://www.flickr.com/photos/tags/kitten/",
  "description": "",
  "modified": "2016-06-19T09:32:56Z",
  "generator": "http://www.flickr.com/",
  "items": [
    {
      "title": "Portrait of Simba and Mogli",
      "link": "http://www.flickr.com/photos/112684907@N06/27665373772/",
      "media": {"m":"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg"},
      "date_taken": "2016-06-17T17:09:38-08:00",
      "description": " <p><a href="%5C%22http://www.flickr.com/people/112684907@N06/%5C%22">stefanhuber92 posted a photo: <p><a and='\"href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\"' mogli='\"of=\"' simba='\"title=\"Portrait\"'><img alt='\"Portrait\"' and='\"height=\"240\"' mogli='\"of=\"' simba='\"src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\"'    style="max-width:90%"177\"'> ",
      "published": "2016-06-19T09:32:56Z",
      "author": "nobody@flickr.com (stefanhuber92)",
      "author_id": "112684907@N06",
      "tags": "pet cats cute eye animal animals cat tiere kitten siblings katze katzen fell haustier liebe tier gemütlich petlove geschwister kuscheln schön catlove süs petlover"
    },
    // ... 19 more items ...
  ]
})</a></p></a></p>

Respons JSON dibungkus dalam fungsi

. Ini membolehkan kami mengintegrasikan imej Flickr ke laman web kami:

jsonFlickrFeed

Untuk lebih lanjut mengenai JSONP, lihat: JQuery's JSONP dijelaskan dengan contoh

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img  alt="Muatkan gambar Flickr menggunakan API JSONP" >").attr("src", item.media.m).appendTo("#images");
  });
};

$.ajax({
  url: 'https://api.flickr.com/services/feeds/photos_public.gne',
  dataType: 'jsonp',
  data: { "tags": "kitten", "format": "json" }
});

Demo

Lihat output yang dihasilkan di sini:

lihat pena vkxzrz oleh sitepoint (@sitePoint) pada codepen.

Butiran lanjut mengenai API Flickr boleh didapati di laman utama API.

Soalan Lazim (Soalan Lazim)

Bahagian ini menjawab soalan umum mengenai penggunaan API Flickr untuk memuatkan foto, meliputi topik seperti mendapatkan objek JSON yang betul, memahami kekunci API, mencari foto, pengendalian ralat, memaparkan foto, memuat naik foto, penembusan, pengambilan metadata, mengakses foto pengguna, dan keperluan utama API. (Seksyen FAQ asal dikekalkan, tetapi diubahsuai untuk kesesuaian dan untuk mengelakkan pengulangan.)

Atas ialah kandungan terperinci Muatkan gambar Flickr menggunakan API JSONP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!