Ajax请求github真实接口数据

最新推荐文章于 2022-09-20 17:43:46 发布

麻辣小龙侠呀

最新推荐文章于 2022-09-20 17:43:46 发布

阅读量232

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45044292/article/details/105615924

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
		<button>请求所以git信息</button>
		<h1>用户信息</h1>
		<div id="DI">
			
		</div>
		<script>
			document.getElementsByTagName('button')[0].addEventListener('click',function(){
				var XML = new XMLHttpRequest;
				XML.open('GET','https://api.github.com/users',true);
				XML.onload =function(e){
					//先进性转换
					e.preventDefault()//防止事件默认发生
					var users = JSON.parse(this.responseText)
					//转为了一个对象所以没有长度
					var newU = '';
					for (var i in users) {
						newU +=`
							<ul>
								<li>${users[i].id}</li>
								<li>${users[i].login}</li>
								<li>${users[i].url}</li>
								<li>${users[i].type}</li>
							</ul>
						`;
					}
					document.getElementById('DI').innerHTML =newU;
				}
				XML.send()
			});
		</script>
	</body>

https://api.github.com/users

这个网址有官方给定的api接口，测试数据总共有30条

//for in循环里的 `` 是es6中新增的目的为了方便html标签的拼接,位于tap键的上一个键，如果要引入数据需要加${}其他的和HTML一样

写的比较简单没有监听readystate和status的状态码

麻辣小龙侠呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求github真实接口数据

<body> <button>请求所以git信息</button> <h1>用户信息</h1> <div id="DI"> </div> <script> document.getElementsByTagName('button')[0].addEventListe...
复制链接

扫一扫

专栏目录