枯燥的js GitHub

最新推荐文章于 2022-04-10 09:52:03 发布

帅癌病患者

最新推荐文章于 2022-04-10 09:52:03 发布

阅读量98

点赞数

分类专栏： JavaScript笔记文章标签： Ajax GitHub API JavaScript 用户信息 XMLHttpRequest

本文链接：https://blog.csdn.net/weixin_51664705/article/details/114482412

版权

JavaScript笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

请求GITHUB

<style>
            .user{
                display: flex;
                background-color: #f4f4f4;
                padding: 10px;
                margin-bottom: 10px;
            }
            .user ul{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <button id="button">请求GITHUB</button>
        <br><br>
        <h1>所有GitHub的用户信息</h1>
        <div id="users"></div>
       
        <script>
           document.getElementById('button').addEventListener('click',loadUser);
           function loadUser(){
               var xhr = new XMLHttpRequest();
               xhr.open("GET","https://api.github.com/users",true);
               xhr.onload =function(){
                   var users = JSON.parse(this.responseText);
                   var output = '';
                   for(var i in users){
                       output = `
                       <div class="user">
            <img src="${users[i].avatar_url}" width="70px" height="70px">
            <ul>
                <li>ID:${users[i].id}</li>
                <li>Login:${users[i].login}</li>
            </ul>
        </div>
                       `
                   }
                   document.getElementById('users').innerHTML = output;
               }
               xhr.send();
           }
        </script>
    </body>