请求json数据
单个json
接口
<button id="button1">请求单个用户</button>
<button id="button2">请求所有用户</button>
<br><br>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('button1').addEventListener('click',loadUser);
function loadUser(){
var xhr = new XMLHttpRequest();
xhr.open("GET","https://mock.yonyoucloud.com/mock/17427/css.txt",true);
xhr.onload = function(){
if(this.status==200){
var user = JSON.parse(this.responseText);
var output =' ';
// es6写法
output+=`
<ul>
<li>${
user.id}</li>
<li>${
user.name}</li>
<li>${
user.email}</li>
</ul>
`;
//
document.getElementById('user').innerHTML = output;
}
}
xhr.send();
}
</script>
多个json
接口
<button id="button1">请求单个用户</button>
<button id="button2">请求所有用户</button>
<br><br>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('button2').addEventListener('click',loadUsers);
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","https://mock.yonyoucloud.com/mock/17427/demo.json",true);
xhr.onload = function(){
if(this.status==200){
var users = JSON.parse(this.responseText);
var output =' ';
//遍历数组
for(var i in users){
output+=`
<ul>
<li>${
users[i].id}</li>
<li>${
users[i].name}</li>
<li>${
users[i].email}</li>
</ul>
`;
}
//
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>