基本上,您需要对给定的API进行AJAX调用,并使用结果填充某个目标容器
这里是表示用户点击
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
success: function(users) {
for (var i = 0; i < users.length; i++) {
var user = document.createElement("div");
user.id = 'user-' + users[i].id;
user.className = 'user';
span = document.createElement('span');
span.innerHTML = users[i].name;
albums = document.createElement('ul');
albums.className = 'albums';
user.appendChild(span);
user.appendChild(albums);
user.addEventListener("click", function(){
var that = this;
var userId = this.id.split('-')[1];
var dest = this.getElementsByClassName('albums')[0];
dest.innerHTML = '';
$.ajax({
url: "https://jsonplaceholder.typicode.com/albums",
success: function(albums) {
for (var j = 0; j < albums.length; j++) {
if (albums[j].userId == userId) {
console.log(albums[j].userId, ' == ', userId);
var li = document.createElement('li');
li.innerHTML = albums[j].title;
dest.appendChild(li);
}
}
}
})
});
document.getElementById('users').appendChild(user);
}
}
});