在页面上异步获取Controller中响应的json数据。
页面代码：
01.
<%@ page language="java" contentType="text/html; charset=UTF-8"
02.
pageEncoding="UTF-8"%>
03.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
04.
<html>
05.
<head>
06.
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
07.
<title>User List</title>
08.
09.
<scripttype="text/javascript"src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
10.
<scripttype="text/javascript">
11.
$(document).ready(function(){
12.
$("#button_getUser").click(function(){
13.
//异步请求json数据
14.
$.ajax({
15.
type:"POST",
16.
url:"${pageContext.request.contextPath}/user/getUserList",
17.
success:function(data){
18.
//迭代返回的json数据
19.
$.each(data,function(i,user){
20.
$("#results").append(user.userName+"---"+user.password+"<br>");
21.
});
22.
},
23.
error:function(e) {
24.
alert("出错："+e);
25.
}
26.
});
27.
});
28.
});
29.
</script>
30.
31.
</head>
32.
<body>
33.
<inputtype="button"id="button_getUser"value="获取用户列表"><br>
34.
用户信息：<br>
35.
<divid="results">
36.
37.
</div>
38.
</body>
39.
</html>
01.
@RequestMapping("/getUserList")
02.
publicString getUserList(HttpServletResponse response) {
03.
response.setCharacterEncoding("UTF-8");
04.
response.setContentType("application/json");
05.
06.
List<User> userList = getUsers();
07.
Gson gson =new Gson();
08.
String json = gson.toJson(userList);
09.
System.out.println("json---"+json);
10.
PrintWriter out =null;
11.
try{
12.
out = response.getWriter();
13.
out.write(json);
14.
out.flush();
15.
}catch(Exception e) {
16.
e.printStackTrace();
17.
}finally{
18.
if(out !=null) {
19.
out.close();
20.
}
21.
}
22.
23.
return"/user/userList";
24.
}
25.
26.
privateList<User> getUsers() {
27.
List<User> users =new ArrayList<User>();
28.
29.
User user1 =new User();
30.
user1.setUserName("李坏");
31.
user1.setPassword("LiHuai");
32.
33.
User user2 =new User();
34.
user2.setUserName("阿飞");
35.
user2.setPassword("aFei");
36.
37.
User user3 =new User();
38.
user3.setUserName("陆小凤");
39.
user3.setPassword("LuXiaoFeng");
40.
41.
users.add(user1);
42.
users.add(user2);
43.
users.add(user3);
44.
45.
returnusers;
46.
}
结果如下：
或者使用@ResponseBody，需要用到jackson相关的包。
页面：
01.
<%@ page language="java" contentType="text/html; charset=UTF-8"
02.
pageEncoding="UTF-8"%>
03.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
04.
<html>
05.
<head>
06.
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
07.
<title>User List</title>
08.
09.
<scripttype="text/javascript"src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
10.
<scripttype="text/javascript">
11.
$(document).ready(function(){
12.
$("#button_getUser").click(function(){
13.
//异步请求json数据
14.
$.ajax({
15.
type:"POST",
16.
url:"${pageContext.request.contextPath}/user/getUserList",
17.
success:function(data){
18.
//迭代返回的json数据
19.
$.each(data.users,function(i,user){
20.
$("#results").append(user.userName+"---"+user.password+"<br>");
21.
});
22.
},
23.
error:function(e) {
24.
alert("出错："+e);
25.
}
26.
});
27.
});
28.
});
29.
</script>
30.
31.
</head>
32.
<body>
33.
<inputtype="button"id="button_getUser"value="获取用户列表"><br>
34.
用户信息：<br>
35.
<divid="results">
36.
37.
</div>
38.
</body>
39.
</html>
Controller:
1.
@RequestMapping("/getUserList")
2.
@ResponseBody
3.
publicMap<String,Object> getUserList() {
4.
Map<String,Object> resultMap =new HashMap<String,Object>();
5.
List<User> userList = getUsers();
6.
resultMap.put("users", userList);
7.
returnresultMap;
8.
}
4774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
