6.SpringMVC实现Ajax。
1.实体类User
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private int age;
private String name;
private String sex;
}
2.获取一个集合对象，展示到前端页面
@RequestMapping("/a2")
public List<User> a2(){
ArrayList<User> userList = new ArrayList<User>();
//添加数据
userList.add(new User(18,"小飞","男"));
userList.add(new User(18,"小娟","女"));
userList.add(new User(19,"小明","男"));
return userList;//由于@RestController注解，将list转换成json格式返回
}
3.前端界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AjaxTest（获取数据）</title>
<%--引入jQuery.Ajax--%>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<%--
${"#btn"}:绑定btn事件
click：点击事件 等同于JS原生点击事件onclick，效果一样
function：写一个方法
--%>
<script>
$(function (){
$("#btn").click(function () {
/*
简写：$post(url , param[可以省略]，success)
*/
$.post("${pageContext.request.contextPath}/a2",function (data) {
//console.log(data);
var html="";
//这里出现let是因为 JavaScript的版本为6！
//这里使用let是因为var的话for循环的括号外面也会生效
//let确保循环语句只在括号内生效
for (let i = 0; i <data.length ; i++) {
html +="<tr>"+"" +
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}
//将后端数据传给前端，绑定#content
$("#content").html(html);
})
})
});
</script>
</head>
<body>
<%--获取事件--%>
<input type="button" value="获取数据" id="btn">
<%--table：展示页面--%>
<table>
<tr>年龄：</tr>
<tr>姓名：</tr>
<tr>性别：</tr>
<tbody id="content">
<%--获取后台数据--%>
</tbody>
</table>
</body>
</html>
运行结果：
成功实现了数据回显，可以体会一下Ajax的好处。
标签：研究,userList,Ajax,let,User,new,data From： https://www.cnblogs.com/itxiaofei/p/16887923.html