controler层:
@RequestMapping("/a2")
public List<User> a2(){
LinkedList<User> list = new LinkedList<>();
list.add(new User("python",1,"男"));
list.add(new User("java",3,"女"));
list.add(new User("sql",6,"男"));
return list;
}
js代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//$.post(url, param[可以省略] success)
$.post("${pageContext.request.contextPath}/a2", function (data) {
var html = '';
for (let i = 0; i < data.length; i++) {
html += "<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].sex + "</td>" +
"</tr>"
}
$("#content").html(html)
})
})
});
</script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
<%-- 数据 后台--%>
</tbody>
</table>
</body>
</html>
点击加载数据,触发事件
效果图: