springmvc中以一个页面作为响应返回给ajax
2014-12-08 10:10:17本站整理浏览(585)
springmvc中以一个页面作为响应返回给ajax，有需要的朋友可以参考下。
springmvc配置这里不写了直接上代码
下面是jsp请求页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%-- ${pageContext.request.contextPath } --%>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-1.11.1.js"></script>
<title>Insert title here</title>
<style type="text/css">
#div1{
border: 1px solid gray;
text-align: center;
height: 600px;
width:400px;
margin:0 auto;
}
</style>
<script type="text/javascript">
function findUser() {
$.ajax({ //这是$.ajax()方法
type:"POST",
url:"/1206homework/find",
data: $('#myform').serialize(),//ajax提交表单
dataType:"html",//接受响应的数据类型，我的响应是一个页面，所以这里用“html”
success:function(data){
$('#mydiv').html(data);//我把响应的页面被放到一个div中显示
}
})
}
</script>
</head>
<body >
<div id="div1">
<form id="myform" method="post" action="/1206homework/find">
<input type="text" name="username" id="username" />
<input type="button" value="查询" οnclick="findUser()" /><br/><br/>
</form>
<hr/>
<div id="mydiv"></div>
</div>
</body>
</html>
下面是处理请求的contoller
package com.leo.controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.leo.entity.User;
import com.leo.service.UserServiece;
@Controller
public class MyController {
private UserServiece us;
public void setUs(UserServiece us) {
this.us = us;
}
@ResponseBody//作用是将返回的对象作为响应，发送给页面
@RequestMapping("/find")
public ModelAndView findUsers(String username,ModelAndView m){
setUs(new UserServiece());
List<User> users = us.findUsers(username);
m.addObject("users", users);
m.setViewName("showUser");
return m;
}
}
showUser是一个页面，显示数据，（我要把这个页面作为响应，返回给发送请求的那ajax页面）
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%-- ${pageContext.request.contextPath } --%>
<script type="text/javascript" src="../resource/js/jquery-2.1.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
table{
border: 1px solid gray;
}
td,th{
border:1px solid gray;
width: 60px;
}
</style>
</head>
<body >
<div >
<table >
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<c:forEach items="${users }" var="user">
<tr>
<td>${user.id }</td>
<td>${user.username }</td>
<td>${user.age }</td>
<td>${user.address }</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
376
