本节我们继续完成一个demo,利用Ajax获得后端的数据并展示到前端
AjaxController.java
@RequestMapping("/a2")
public List<User> a2(){
List<User> userList=new ArrayList<User>();
//添加数据
userList.add(new User("java",1,"a"));
userList.add(new User("c++",2,"b"));
userList.add(new User("go",3,"c"));
return userList;
}
test2.jsp
<%--
Created by IntelliJ IDEA.
User: apple
Date: 2022/2/7
Time: 2:55 下午
To change this template use File | Settings | File Templates.
--%>
<%@ 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>
加载数据成功!
Ajax的前端写法比较难以理解,都是固定的写法,写的时候参考即可