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

转载

mb5fe94bcc59f7e 2015-07-20 15:52:00

文章标签 html javascript css bootstrap java 文章分类 代码人生

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>