data数据
{
"list":[
{
"dire":"职务","age":"年龄","name":"姓名"
},
{
"dire":"学生","age":"18","name":"小明"
},
{
"dire":"老师","age":"28","name":"老王"
},
{
"dire":"教务主任","age":"28","name":"老李"
},
{
"dire":"院长","age":"38","name":"老张"
}
]
}
js方法
<body>
<button class="tab">111</button>
<div class="abb"></div>
</body>
<script>
$(".tab").click(function () {
$.ajax({
type: "get",
url: "./failLoad.json",
dataType: "json",
success: function (data) {
var data = data.list
var html = "";
$.each(data, function (k, v) {
//es6模板语法
html += `<tr><td>${data[k].dire} -- ${data[k].age} -- ${data[k].name}</td></tr>`
})
$(".abb").append(html);
},
})
})
</script>
或者另外一种方法
<body>
<button class="tab">111</button>
<div class="abb"></div>
</body>
<script>
$(".tab").click(function () {
$.ajax({
type:"get",
url:"./failLoad.json",
dataType:"json",
success:function(res) {
console.log(res);
var data = res.list;
var html = "";
for( var i = 0; i < data.length; i++ ) {
html += "<tr>";
html += `<td> ${data[i].dire} --</td>`;
html += `<td> ${data[i].age} --</td>`;
html += `<td> ${data[i].name} </td>`;
html += "</tr>";
}
$(".abb").html(html);
}
})
})
</script>