所以我之前也问过类似的问题，但没有得到回应。经过一个小时的折腾，我想出了另一个办法。但我又面临同样的问题。我成功地获得了所有的相册名称和所有的照片。但问题是，所有的相册名称都同时显示，后来所有的照片都显示出来了。我想显示类似的相册名称和相应的照片，然后再显示另一个相册。我不知道我做错了什么。请帮忙。
<html>
<body height="400" width="345">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
"method": "GET", }
$.ajax(settings).done(function (data) {
console.log(data);
// $("#galleryTitle").append(data.photos.photo[0].title + " Gallery");
$.each( data.photosets.photoset, function( i, gp ) {
$("#albumname").append(data.photosets.photoset[i].title._content + " Gallery");
var id = gp.id;
var settings1 = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id="+ id +"&user_id=193275648%40N03&format=json&nojsoncallback=1",
"method": "GET", }
$.ajax(settings1).done(function (data) {
console.log(data);
$.each( data.photoset.photo, function( i, gpr ) {
var farmId = gpr.farm;
var serverId = gpr.server;
var id = gpr.id;
var secret = gpr.secret;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret);
// https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
$("#flickr").append('<center><img style="border:1px solid #000000" src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');
});
});
});
});
</script>
<!-- <h2><div id="galleryTitle"></div></h2> -->
<h2><div id="albumname"></div></h2>
<div id="flickr"/>
</body>
</html>
<style>
img{
width: auto;
height: 80%;
max-width: 100%;
overflow: hidden;
border-width: 1px;
border-color: Black;
padding: 5px;
}
</style>第一个API调用的JSON响应
{"照片集"：{"页面"：1，"页面"1，"每页"：500，"总计"：1；193275648@N03&"用户名"："kasindimahesh"主"："51258562023〃"秘密"："dba1214e96"服务器"："65535"农场"：66；count_views"："0"count_comments"："0"count_photos"：2；count_videos"：0；标题"：{"_content"："fff"}；描述"：{"_content"："}，"；can_comment"：0；date_create"："1624162691〃"date_update"："1624172423〃"照片"：2；视频"：0；visibility_can_set"：1；needs_填隙"：0}]}，"；stat"："ok"}
第二次API调用的JSON响应
{"photoset"：{"id"："72157719443542617"，"primary"："51258562023"，"owner"："；193275648@N03&"所有者名称"："kasindimahesh"照片"：[{"id"："51258562023"，"secret"："dba1214e96"，"server"："65535"，"farm"：66，"title"："WhatsApp Image 2021-06-07 at 17.15.56"，"isprimary"："1"，"ispublic"：1，"isfriend"：0、"isfamily"：0}，{"id"："51259309294"，"secret"："c2f246caf7"，"server"："65535"，"farm"：66，"title"："WhatsApp Image 2021-06-05 at 16.34/10"，"isprimary"："0&"，"ispublic"：1，"isfriend"：0，"isfamily"：0}]，"；第"页"：1；per_page"：500；每页"：500；页码"：1；标题"："fff"总计"：2} ，"；stat"："ok"}
如果我理解正确，您需要显示相册标题，然后显示该相册中的图像。正确的
然后，您需要将标题/图像依次附加在同一个包装元素中，而不是两个不同的元素中。
var settings = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
"method": "GET",
}
const flickr = $("#flickr"); // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
$.each(data.photosets.photoset, function(i, gp) {
const div = $("<div/>"); // a div for each album
flickr.append(div);
const albumname = $("<h2/>"); // headline for the album
albumname.text(gp.title._content + " Gallery");
div.append(albumname);
var id = gp.id;
var settings1 = {
"async": true,
"crossDomain": true,
"url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=193275648%40N03&format=json&nojsoncallback=1",
"method": "GET",
}
$.ajax(settings1).done(function(data) {
$.each(data.photoset.photo, function(i, gpr) {
var farmId = gpr.farm;
var serverId = gpr.server;
var id = gpr.id;
var secret = gpr.secret;
div.append('<center><img style="border:1px solid #000000" src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>'); // append images to album div
});
});
});
});img {
width: auto;
height: 80%;
max-width: 100%;
overflow: hidden;
border-width: 1px;
border-color: Black;
padding: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flickr"></div>