html
<!DOCTYPE html>
<html lang="en">
<style>
td{
width: 200px;
text-align: center;
padding: 10px;
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/js/jquery-3.6.0.js"></script>
<script>
function my(){
$.ajax({
url: "/userData",
type:"post",
dataType:"json",
success:function (data) {
console.log(data);
myFunction(data);
}
})};
function myFunction(arr) {
var out = "";
for(let i = 0; i < arr.length; i++) {
out += "<tr>"
+ "<td>"+arr[i].id+"</td>"
+"<td>"+arr[i].name+"</td>"+
"</tr>";
}
document.getElementById("content").innerHTML=out;
}
</script>
</head>
<body>
<button onclick="my()">ajax02</button>
<table border="1">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tbody id="content">
</tbody>
</table>
</body>
</html>
后台请求
@RequestMapping("/userData")
public List<User> list(){
List<User> list = new ArrayList<>();
list.add(new User(1,"Java学烂"));
list.add(new User(2,"JavaScript学好"));
list.add(new User(3,"Spring全家桶"));
list.add(new User(4,"数据库(mysql)"));
return list;
}
效果: