<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
margin: 100px auto;
width: 500px;
}
td{
border: 1px solid #0094ff;
}
</style>
</head>
<body>
<h1>获取女神</h1>
<input type="button" value="获取很多女神" id='getStars'>
</body>
</html>
<script type="text/javascript">
document.querySelector("#getStars").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('post','getStars.php');
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
console.log(ajax.responseText);
// 转化为 js对象 不管是 数组 还是 对象 都可以使用该方法转化
var starArr = JSON.parse(ajax.responseText);
console.log(starArr);
//拼接字符串
var str="";
str += '<table>';
for (var i = 0; i < starArr.length; i++) {
var currentStar=starArr[i];
str+="<tr>"
str+='<td>'+currentStar.name+'</td>'
str+='<td>'+currentStar.skill+'</td>'
str+='<td><img src="'+currentStar.path+'"></td>'
str+="</tr>"
}
str += '</table>';
//table 结束
console.log(str);
//打印到页面
document.body.innerHTML=str;
}
}
}
</script>
<?php
echo file_get_contents('info/stars.json');
?>
json
[
{
"name":"汤果果",
"skill":"打野",
"path":"images/1.png"
},
{
"name":"笑笑",
"skill":"空大",
"path":"images/2.png"
},
{
"name":"miss",
"skill":"卖萌",
"path":"images/3.png"
}
]
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
