一.实现步骤及原理:
用Ajax技术可以请求github接口数据,这里对用户信息的登录名、url和头像数据进行了请求,并将其放进了一个div中列表展示出来。
二.示例代码:
<button id="btn">请求github接口</button>
<br>
<h1>调用所有github的用户信息</h1>
<div id="users"></div>
<script>
document.getElementById("btn").addEventListener("click",loadUsers);
function loadUsers() {
let xhr= new XMLHttpRequest();
xhr.open("GET","https://api.github.com/users",true);
xhr.onload = function () {
let users = JSON.parse(this.responseText);
let output ="";
for (let i in users)
output +=`
<div class="user">
<img src="${users[i].avatar_url}" width="70px" height="70px" alt="">
<ul>
<li>LoginName:${users[i].login}</li>
<li>URL:${users[i].url}</li>
</ul>
</div>
`;
document.getElementById("users").innerHTML = output;
};
xhr.send();
}
</script>