后台的代码
@Controller和@ResponseBody配合使用,等于@RestController
//告诉SpringMVC,此时的返回 不是一个 View页面,而是一个 ajax调用的返回值(Json数组)
@ResponseBody
@RequestMapping(value="testJson")
public List<Student> testJson() {
//Controller-Service-dao
//模拟调用service的查询操作到的结果
Student stu1 = new Student(1,"zs",23);
Student stu2 = new Student(2,"ls",24);
Student stu3 = new Student(3,"ww",25);
List<Student> students = new ArrayList<>();
students.add(stu1) ;
students.add(stu2) ;
students.add(stu3) ;
return students;
}
前端页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testJson").click(function(){
//按钮只可以被点击一次
$(this).attr('disabled', 1);
//通过ajax请求springmvc
$.post(
"testJson",//服务器地址
function(result) {
for (var i = 0; i < result.length; i++) {
var trTD =
"<tr><td>" +
result[i].id + "</td><td>" +
result[i].name + "</td><td>" +
result[i].age+
"</td></tr>";
$("#tb").append(trTD);
}
}
);
});
});
</script>
</head>
<body>
<div>
<table id="tb">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
</table>
<!-- style="VISIBILITY: hidden" //让按钮隐形-->
<input id="testJson" type="button" value="testJson" />
</div>
<br/><br><br><br><br>
</body>
</html>
运行页面:
点击按钮
更多推荐
Ajax - 接收 后端查询数据库的数据 在前端展示
发布评论