Ajax总结(二)
2018-06-20 本文已影响11人
风的低语
1.在Data文件夹下创建text文件,文件名为StudentData
格式:
[
{"键":"值","键":"值","键":"值"...},
{"键":"值","键":"值","键":"值"...}
]
(数组包对象的形式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--这里要导入jquery文件,AJAX是基于js的,所以jquery也可以-->
<script src="js/jquery-1.8.3.js">
</script>
<script>
$(function() {
$("button").click(function() {
$.ajax({
type: "get",
url: "Data/StudentData",
dataType: "json",
async: true,
success: (function(data) {
$("table tbody").empty();//$("table tbody").html("");清空显示内容的两种方式
for (var i = 0; i < data.length; i++) {
$("table tbody").append("<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].subject + "</td><td>" + data[i].score + "</td></tr>");
}
}),
});
});
})
</script>
</head>
<body>
<button>展示数据</button>
<table border="1">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">qq</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
