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

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>
时间: 2024-08-29 14:46:39

jquery ajax配合SpringMVC实现局部刷新DIV的相关文章

jquery ajax协调SpringMVCD实现局部刷新IV

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();

ajax实现网页的局部刷新

从页面到ajax函数的运行的大致思路:页面点击事件,触发 xmlHttp.open("post", url, true)函数的执行.通过web.xml的配置的servlet-mapping,url所附带的参数会被处理的servlet类接收,此类中可进行数据库的查询,并将查询结果以xml文件的格式保存下来,页面会以解析xml文件将值传到前台,完成了局部刷新的功能. 1.mysql创建的数据库表的字段及相对应的javabean.(可使用hibernate框架构建user数据库) user.

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h

div.load()方式局部刷新div

主页面部分 <section class="content-header"> <h5> 数据字典 </h5> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-md-6"> <div clas

如何用php+ajax实现页面的局部刷新?(转)

client.html XML/HTML code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>   <meta http-equiv="content-type" content="text

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

jQuery翻页yunm.pager.js,涉及div局部刷新

前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢? <form rel="support_deal_page" ta

服务器端控件的局部刷新,CallBack

服务器端控件的局部刷新,CallBack (2007-01-13 13:46:37) 转载▼   分类: 技术资料 发现了.net2.0原来有套CallBack机制,可以轻松实现服务器控件类似AJAX的效果(实现局部刷新),不过真的是服务器端控件用AJAX的话,效果确乎是没ASP.NET AJAX 好Callback与asp.net ajax的UpdatePanel控件内在实现机制都是Ajax但采用UpdatePanel控件的页面仍然采用Postback方式与服务器交互,会更新ViewState

ASP.Net 在Update Panel局部刷新后 重新绑定JS方法

我们知道Asp.Net中的Update Panel可以完成页面的局部刷新(实质上是Ajax),但是局部刷新完后,此区域的控件上所绑定的JS方法就会失效,因为我们用如下方法来重新绑定. var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { // re-bind your jQuery events here }); 更多详细信息请看如下链接: http://stackove