jquery ajax配合SpringMVC实现局部刷新DIV

最新推荐文章于 2022-02-26 18:01:10 发布

Mr_LiuP

最新推荐文章于 2022-02-26 18:01:10 发布

阅读量1.6w

点赞数 16

分类专栏： jquery ajax局部刷新文章标签： jquery ajax局部刷新

本文链接：https://blog.csdn.net/liupeng_family/article/details/41008701

版权

jquery ajax局部刷新专栏收录该内容

0 篇文章 0 订阅

订阅专栏

feedback.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	String imgPath = request.getParameter("imgPath") == null ? ""
			: request.getParameter("imgPath").toString().trim();
	System.out.println(imgPath);
%>

<!DOCTYPE HTML>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<base href="<%=basePath%>">

<title>反馈信息</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap.css"></link>
<link rel="stylesheet"
	href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap-theme.css"
	type="text/css"></link>

<script type="text/javascript" src="<%=basePath%>bootmetro/js/jquery-1.10.0.min.js"></script>
<script src="<%=basePath%>bootmetro/js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery-1.11.1.min.js"></script>
<script src="<%=basePath%>bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

<style type="text/css">
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/*margin-left:-40px;*/
	/* Set the fixed height of the footer here */
	height: 60px;
	background-color: #2F2F2F;/*#f5f5f5;*/
}

body{
	/*padding:50px;*/
}

.footer>.container {
	padding-right: 15px;
	padding-left: 15px;
}
</style>
</head>

<body>
	<!-- Fixed navbar -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container" style="line-height:50px;">
      <div style="text-align: center;">
      	<a style="color:white;font-size: 18px;text-decoration: none">反馈信息</a>
      </div>
      
      </div>
    </nav>

	 <div class="container" style="margin-top:20px;padding:50px">
	 	<div class="row-fluid">
	 		<div id="flushDIV" class="col-xs-12 col-sm-12 col-md-12" style="box-shadow:0 0 10px #666666;border-radius:8px;">
	 			<table class="table table-hover" style="text-align: center;table-layout: fixed;">
	 				<thead>
	 				<tr>
	 					<th style="text-align: center;">邮箱地址</th>
	 					<th style="text-align: center;">设备ID</th>
	 					<th style="text-align: center;">电话号码</th>
	 					<th style="width:200px; text-align: center;">正文</th>
	 					<th style="text-align: center;">时间</th>
	 				</tr>
	 				</thead>
	 			<c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">
	 				<tr id="${utcFeedback.deviceId }">
	 					<td>${utcFeedback.email }</td>
	 					<td>${utcFeedback.deviceId }</td>
	 					<td>${utcFeedback.phoneNo }</td>
	 					<!--
	 					<td><a data-toggle="modal" data-target=".bs-example-modal-sm" href="javascript:void(0)">${utcFeedback.content }</a></td>
	 					-->
	 					<td>${utcFeedback.content }</td>
	 					<td>${utcFeedback.opTimer }</td>
	 				</tr>	
	 			</c:forEach>
	 					<tr>
	 						<td colspan="5">
	 							<c:if test="${page.totalCount > 0}">
	 								<c:choose>
	 									<c:when test="${page.pageNo == 1}">
	 										<a style="text-decoration: none">首页</a>    
	 										<a style="text-decoration: none">上一页</a>    
	 									</c:when>
	 									<c:otherwise>
	 										<a href="javascript:doPage(1);">首页</a>    
	 										<a href="javascript:doPage(${page.upPage});">上一页</a>    
	 									</c:otherwise>
	 								</c:choose>
	 								<c:choose>
	 									<c:when test="${page.pageNo == page.totalPage || page.totalPage == 0}">
	 										<a style="text-decoration: none">下一页</a>    
	 										<a style="text-decoration: none">末页</a>    
	 									</c:when>
	 									<c:otherwise>
	 										<a href="javascript:doPage(${page.nextPage});">下一页</a>    
	 										<a href="javascript:doPage(${page.totalPage});">末页</a>    
	 									</c:otherwise>
	 								</c:choose>
								
								<a style="text-decoration: none">当前第${page.pageNo}页</a>    
								<a style="text-decoration: none">共${page.totalPage}页</a>    
								</c:if>
								<a style="text-decoration: none">共${page.totalCount}条数据</a>    
	 						</td>
	 					</tr>
				</table>
	 		</div>
	 	
	 		
	 		
	 	</div>
	 </div>
	 
	<div class="footer">
		<div class="container">
		</div>
	</div>
	<script type="text/javascript">
		function doPage(n){
			$('#flushDIV').html("");
			$.ajax({
			       type:"POST",
			       url:"<%=basePath%>apps/queryFeedBackInfo.do",
			       data:{pageNo:n},
			       dataType: "html",   //返回值类型       使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式
			       cache:false,
			       success:function(data){
			           //var json = eval('('+msg+')');//拼接的json串
			           $('#flushDIV').html(data);
			       },
			       error:function(error){alert(error);}
			   });
		}
	</script>

</body>

</html>

conroller(具体DAO和Page类省略):

/**
	 * 显示不同页码的反馈信息
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value="/queryFeedBackInfo")
	public ModelAndView queryFeedBackInfo(HttpServletRequest request,HttpServletResponse response)throws Exception{
		UtcFeedbackDao utcFeedbackDao = new UtcFeedbackDao();
		int currentPage = request.getParameter("pageNo")==null?1:request.getParameter("pageNo").toString().trim()==""?1:Integer.parseInt(request.getParameter("pageNo").toString().trim());
		Pagination<UtcFeedback> page = null;//分页帮助类
		page = utcFeedbackDao.findByCondition(currentPage,pagesize);
		
		HashMap map = new HashMap();
	    map.put("page", page);
		return new ModelAndView("app/temp",map);
	}

temp.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'temp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<table class="table table-hover" style="text-align: center;table-layout: fixed;">
		<thead>
			<tr>
				<th style="text-align: center;">邮箱地址</th>
				<th style="text-align: center;">设备ID</th>
				<th style="text-align: center;">电话号码</th>
				<th style="width:200px; text-align: center;">正文</th>
				<th style="text-align: center;">时间</th>
			</tr>
		</thead>
		<c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">
			<tr id="${utcFeedback.deviceId }">
				<td>${utcFeedback.email }</td>
				<td>${utcFeedback.deviceId }</td>
				<td>${utcFeedback.phoneNo }</td>
				<td>${utcFeedback.content }</td>
				<td>${utcFeedback.opTimer }</td>
			</tr>
		</c:forEach>
		<tr>
			<td colspan="5"><c:if test="${page.totalCount > 0}">
					<c:choose>
						<c:when test="${page.pageNo == 1}">
							<a style="text-decoration: none">首页</a>    
	 						<a style="text-decoration: none">上一页</a>    
	 					</c:when>
						<c:otherwise>
							<a href="javascript:doPage(1);">首页</a>    
	 						<a href="javascript:doPage(${page.upPage});">上一页</a>    
	 					</c:otherwise>
					</c:choose>
					<c:choose>
						<c:when
							test="${page.pageNo == page.totalPage || page.totalPage == 0}">
							<a style="text-decoration: none">下一页</a>    
	 						<a style="text-decoration: none">末页</a>    
	 					</c:when>
						<c:otherwise>
							<a href="javascript:doPage(${page.nextPage});">下一页</a>    
	 						<a href="javascript:doPage(${page.totalPage});">末页</a>    
	 					</c:otherwise>
					</c:choose>

					<a style="text-decoration: none">当前第${page.pageNo}页</a>    
					<a style="text-decoration: none">共${page.totalPage}页</a>    
					</c:if> <a style="text-decoration: none">共${page.totalCount}条数据</a>    
			</td>
		</tr>
	</table>
</body>
</html>