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();
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>
版权声明：本文博客原创文章。博客，未经同意，不得转载。
jquery ajax协调SpringMVCD实现局部刷新IV的更多相关文章
- Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
- 如何用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 ajax 异步加载 局部刷新
1. getJSON 优点: 简单高效,直接返回处理好的json数据 缺点: 只能使用get请求和使用json数据 <script src ='jquery.min.js'></sc ...
- jQuery+ajax实现局部刷新
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...
- （局部刷新）jquery.ajax提交并实现单个div刷新
web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- ASP.Net 在Update Panel局部刷新后 重新绑定JS方法
我们知道Asp.Net中的Update Panel可以完成页面的局部刷新(实质上是Ajax),但是局部刷新完后,此区域的控件上所绑定的JS方法就会失效,因为我们用如下方法来重新绑定. var prm ...
随机推荐
- linux登录windows服务器
在公司同时也兼顾了王老师会议网站的任务,我喜欢用linux,而会议网站托管在windows系统上,虽然装了双系统,但我还是比较懒,不喜欢经常切换系统.还好,linux可以实现登录windows服务器. ...
- WCF技术剖析之四：基于IIS的WCF服务寄宿（Hosting）实现揭秘
原文:WCF技术剖析之四:基于IIS的WCF服务寄宿(Hosting)实现揭秘 通过<再谈IIS与ASP.NET管道>的介绍,相信读者已经对IIS和ASP.NET的请求处理管道有了一个大致 ...
- 基于visual Studio2013解决C语言竞赛题之1027 YN
题目 解决代码及点评 /* 计算Yn的值,直到|Yn - Yn-1|<10-6为止,并打印出此时共作了多少次COS计算. 提示:Yn+1=COS(Yn),故本 ...
- 透过表象看本质！？之三——Kalman滤波
数据拟合能够估计出数据变化的趋势,另外一个同等重要的应用是如何利用这一趋势,预测下一时刻数据可能的值.通俗点儿说,你观察苍蝇(蚊子,蜜蜂)飞了几秒,你也许会想“它下一个时刻可能在哪儿”,“呈现出什么样 ...
- 【视频】零基础学Android开发：蓝牙聊天室APP（四）
零基础学Android开发:蓝牙聊天室APP第四讲 4.1 ListView控件的使用 4.2 BaseAdapter具体解释 4.3 ListView分布与滚动事件 4.4 ListView事件监听 ...
- hdu1298 T9(手机输入法，每按一个数字，找出出现频率最高的字串，字典树+DFS)
Problem Description A while ago it was quite cumbersome to create a message for the Short Message Se ...
- OS X 10.10 Yosemite Beta能够下载了
刚刚启动迅雷.蹦出一消息.点击后出现-- watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdmlzdGE5OTk5OQ==/font/5a6L5L2T/fon ...
- Servlet的学习（三）
本篇接上一篇<Servlet的学习(二)> ,主要讲诉如何使用MyEclipse来开发Servlet,和导入Servlet所需要的源代码. 现在我们来创建一个web应用,就叫[myserv ...
- Servlet过滤器——创建过滤器
1.概述 介绍如何创建一个过滤器,并使用过滤器在打开页面的同时输出信息,此功能是由过滤器处理完成的. 2.技术要点 Serlvet过滤器实现了Filter接口,在Filter接口中定义了以下几个方法: ...
- 怎样使用CMenu类
CMenu类从CObject类派生而来.为什么要使用CMenu类呢?AppWzard不是把菜单做好了吗?在资源编辑器上修改菜单不是很方便吗? 我是个vc++初学者,自从当斑竹以来,天天看贴子, ...