Springmvc实现
实体类user
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private String name;private int age;private String sex;}
我们来获取一个集合对象，展示到前端页面
@RequestMapping("/a2")
public List<User> ajax2(){List<User> list = new ArrayList<User>();list.add(new User("秦疆1号",3,"男"));list.add(new User("秦疆2号",3,"男"));list.add(new User("秦疆3号",3,"男"));return list; //由于@RestController注解，将list转成json格式返回
}
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"></tbody>
</table><script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>$(function () {$("#btn").click(function () {$.post("${pageContext.request.contextPath}/a2",function (data) {console.log(data)var html="";for (var 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>
</body>
</html>
成功实现了数据回显！可以体会一下Ajax的好处！
)
)
