JQuery 用Ajax 获取Json数据并显示
<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"
}
]
