Ajax3

来源:互联网 发布:linux下压缩文件夹命令 编辑:程序博客网 时间:2024/05/22 16:06
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ajax3-请求Github接口</title><style>.user{display: flex;background: #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',loadUsers);function loadUsers(){var xhr = new XMLHttpRequest();xhr.open("GET","https://api.github.com/users",true);xhr.onload = function(){var users = JSON.parse(this.responseText);// console.log(users);var output = '';for(var i in users){output += `<div class="user"><img src="${users[i].avatar_url}" width="70" height="70" /><ul><li>ID: ${users[i].id}</li><li>Login: ${users[i].login}</li></ul></div>`;}document.getElementById('users').innerHTML = output;}xhr.send();}</script></body></html>

原创粉丝点击