ajax显示列表案例 (利用mock接口测试)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素ajax</title>
</head>
<body>
<button onclick="getDate()">获取数据</button>
<table>
<tr>
<th>姓名</th>
<th>生日</th>
<th>城市</th>
<th>性别</th>
</tr>
<tbody id="myTbody">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var myTbody = document.getElementById('myTbody');
var url = 'https://www.fastmock.site/mock/03f52e44e804257f49e9dd5c48ae3769/study/test';
function getDate() {
//1.创建ajax对象
var myAjax = new XMLHttpRequest();
//2. 连接 (请求方式,地址,同步false或者异步true)
myAjax.open("GET", url , true)
//3.向服务器发送请求(可以传参)
myAjax.send()// myAjax.send(data)
//4.服务器响应
myAjax.onreadystatechange = function () {
// 4表示走到最后的第四步 readyState 到4 状态为200
if(myAjax.readyState == 4 && myAjax.status == 200){
console.log(myAjax.response);//返回是一个json字符串
// 变成json对象
var res = JSON.parse(myAjax.response);
//JSON.parse() 将返回的json字符串转换成json对象
// JSON.stringify() 将json对象转换为json字符串
console.log(res.user);
showDate(res.user);
}
}
}
function showDate(data) {
var str='';
//()=>相当于fuction 箭头函数this里面始终指向调用者
data.forEach( (item,index) => {
// 循环每一个item
str+= `<tr>
<td>${item.name}</td>
<td>${item.birthday}</td>
<td>${item.city}</td>
<td>${item.sex}</td>
</tr>`
})
myTbody.innerHTML = str;
}
</script>
</body>
</html>
显示:
知识点补充: