Ajax3 - 请求Github接口

最新推荐文章于 2023-04-20 20:57:16 发布

lucky芬

最新推荐文章于 2023-04-20 20:57:16 发布

阅读量727

点赞数

分类专栏：练手小案例

本文链接：https://blog.csdn.net/daimomo000/article/details/78687924

版权

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!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>

lucky芬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax3 - 请求Github接口

Ajax3-请求Github接口 .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } 请求Github接口所有Github的用户信息 docu
复制链接

扫一扫