JQuery 用Ajax 获取Json数据并显示
JQuery:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(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>
HTML:
<center>
<table border="1px solid">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
<input type="button" value="加载数据" />
</center>
Json:
[
{
"name": "zhangsan",
"age": 18,
"sex": "man"
},
{
"name": "lisi",
"age": 17,
"sex": "man"
},
{
"name": "wangwu",
"age": 16,
"sex": "man"
}
]