接上文ajax接收文本信息，此章接收json数据，分为单个用户和多个用户
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ajax请求json数据</title>
</head>
<body>
<button type="button" name="button1" id="button1">请求单个用户</button>
<button type="button" name="button2" id="button2">请求多个用户</button>
<br>
<h1>单个用户请求的数据</h1>
<div id="user">
序列号码：<input type="text" name="" value="" id="user1">
性别：<input type="text" name="" value="" id="user2">
身高：<input type="text" name="" value="" id="user3">
</div>
<h1>所有用户数据</h1>
<div id="users">
</div>
<script type="text/javascript">
//请求一个用户
document.getElementById("button1").addEventListener("click",loadUser);
//定义loadUser函数
function loadUser(){
var xhr1=new XMLHttpRequest();
xhr1.open("GET","user.json",true);
//加载方式
xhr1.onload=function(){
if(this.status==200){
//拿到的数据解析成对象
var user=JSON.parse(this.responseText);
document.getElementById("user1").value=user.id;
document.getElementById("user2").value=user.sex;
document.getElementById("user3").value=user.height;
}
}
xhr1.send();
}
//请求多个用户
document.getElementById("button2").addEventListener("click",loadUsers);
function loadUsers(){
var xhr2=new XMLHttpRequest();
xhr2.open("GET","users.json",true);
xhr2.onload=function(){
var users=JSON.parse(this.responseText);
console.log(users);
var output='';
for(let i in users){
output+=users[i].id+users[i].name+users[i].email;
}
document.getElementById("users").innerHTML=output;
}
xhr2.send();
}
</script>
</body>
</html>