使用Ajax读取数据,并显示到网页中,数据使用文本格式,数据使用json格式
以表格的形式获取数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var datas= [
{"name": "zhangsan","age": 18,"sex": "man"},
{"name": "lisi","age": 17,"sex": "man"},
{"name": "wangwu","age": 16,"sex": "man"}
];
$(function(){
$(':input:eq(0)').click(function(){
$.ajax({
url:'data.json',
type:'get',
datatype:'json',
success:function(datas){
var tbhtml="<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";
for(var i=0;i<datas.length;i++){
tbhtml+="<tr><td>"+datas[i].name+"</td><td>"+datas[i].age+"</td><td>"+datas[i].sex+"</td></tr>";
}
$('table:eq(0)').html(tbhtml);
}
})
})
})
</script>
</head>
<body>
<center>
<table border="1px solid">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
<input type="button" value="加载数据"/>
</center>
</body>
</html>