Javascript 如何从HTML CSS和JS中的API获取数据

这是我的任务

使用HTML、CSS和JS编写一个web应用程序，它可以执行以下操作：

显示使用此API获取的用户列表：。单击用户时，显示使用此API与该用户关联的相册列表。单击相册时，使用此API显示与该相册关联的图像列表

---

我不知道该怎么做，我想我需要创建一个类，并使用第一个API中的数据来创建成员，之后我就有点不知所措了。我已经学习了HTML CSS和JS的基础知识，但是浏览所有这些内容并搜索互联网似乎没有什么帮助。如果有人知道这方面的好消息来源，我将不胜感激

基本上，您需要对给定的API进行AJAX调用，并用结果填充一些目标容器

下面是一个使用jQuery的非常基本的示例，当用户被单击时，它显示了用户列表及其各自的相册

<div id="users"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.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);
        }
    }
});
</script>

$.ajax({
url:“https://jsonplaceholder.typicode.com/users",
成功：功能（用户）{
对于（var i=0；i

基本上，您需要对给定的API进行AJAX调用，并用结果填充一些目标容器

下面是一个使用jQuery的非常基本的示例，当用户被单击时，它显示了用户列表及其各自的相册

<div id="users"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.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);
        }
    }
});
</script>

$.ajax({
url:“https://jsonplaceholder.typicode.com/users",
成功：功能（用户）{
对于（var i=0；i

你被什么困住了？获取数据、建模数据或显示数据？你试过什么？从获取数据开始，有数百万的资源可用于此操作-尝试在现代浏览器上提供的新的

fetch

API，或者jQuery的

$.ajax

。您将使用JSON对象，你可以试试这个网站：因为它教一些JavaScript的基础知识，没有任何库。所以它是一个针对特定问题的问答网站，而不是一个涵盖广泛领域的详细信息论坛。你的问题缺少第三个API链接（图片）。对不起，我应该解释一下，我是web开发新手，谢谢你的帮助这应该是我所需要的你被什么困住了？获取数据、建模数据或显示数据？你试过什么？从获取数据开始，有数百万的资源可用于此操作-尝试在现代浏览器上提供的新的

fetch

API，或者jQuery的

$.ajax

。您将使用JSON对象，你可以试试这个网站：因为它教一些JavaScript的基础知识，没有任何库。所以它是一个针对特定问题的问答网站，而不是一个涵盖广泛领域的详细信息论坛。你的问题缺少第三个API链接（图片）。对不起，我应该解释一下，我是web开发新手，谢谢你的帮助这应该是我所需要的。