jquery ajax配合SpringMVC實現局部刷新DIV

原創 Kiss_Mark 2020-02-23 02:01
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"  
  6.             + request.getServerName() + ":" + request.getServerPort()  
  7.             + path + "/";  
  8.   
  9.     String imgPath = request.getParameter("imgPath") == null ? ""  
  10.             : request.getParameter("imgPath").toString().trim();  
  11.     System.out.println(imgPath);  
  12. %>  
  13.   
  14. <!DOCTYPE HTML>  
  15. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->  
  16. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->  
  17. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->  
  18. <!--[if gt IE 8]><!-->  
  19. <html class="no-js">  
  20. <!--<![endif]-->  
  21. <head>  
  22. <base href="<%=basePath%>">  
  23.   
  24. <title>反饋信息</title>  
  25.   
  26. <meta http-equiv="pragma" content="no-cache">  
  27. <meta http-equiv="cache-control" content="no-cache">  
  28. <meta http-equiv="expires" content="0">  
  29. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  30. <meta http-equiv="description" content="This is my page">  
  31.   
  32. <meta name="viewport" content="width=device-width, initial-scale=1">  
  33.   
  34. <link rel="stylesheet" type="text/css"  
  35.     href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap.css"></link>  
  36. <link rel="stylesheet"  
  37.     href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap-theme.css"  
  38.     type="text/css"></link>  
  39.   
  40. <script type="text/javascript" src="<%=basePath%>bootmetro/js/jquery-1.10.0.min.js"></script>  
  41. <script src="<%=basePath%>bootmetro/js/modernizr-2.6.2.min.js"></script>  
  42. <script type="text/javascript"  
  43.     src="<%=basePath%>js/jquery-1.11.1.min.js"></script>  
  44. <script src="<%=basePath%>bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>  
  45.   
  46. <style type="text/css">  
  47. .footer {  
  48.     position: absolute;  
  49.     bottom: 0;  
  50.     width: 100%;  
  51.     /*margin-left:-40px;*/  
  52.     /* Set the fixed height of the footer here */  
  53.     height: 60px;  
  54.     background-color: #2F2F2F;/*#f5f5f5;*/  
  55. }  
  56.   
  57. body{  
  58.     /*padding:50px;*/  
  59. }  
  60.   
  61. .footer>.container {  
  62.     padding-right: 15px;  
  63.     padding-left: 15px;  
  64. }  
  65. </style>  
  66. </head>  
  67.   
  68. <body>  
  69.     <!-- Fixed navbar -->  
  70.     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">  
  71.       <div class="container" style="line-height:50px;">  
  72.       <div style="text-align: center;">  
  73.         <a style="color:white;font-size: 18px;text-decoration: none">反饋信息</a>  
  74.       </div>  
  75.         
  76.       </div>  
  77.     </nav>  
  78.   
  79.      <div class="container" style="margin-top:20px;padding:50px">  
  80.         <div class="row-fluid">  
  81.             <div id="flushDIV" class="col-xs-12 col-sm-12 col-md-12" style="box-shadow:0 0 10px #666666;border-radius:8px;">  
  82.                 <table class="table table-hover" style="text-align: center;table-layout: fixed;">  
  83.                     <thead>  
  84.                     <tr>  
  85.                         <th style="text-align: center;">郵箱地址</th>  
  86.                         <th style="text-align: center;">設備ID</th>  
  87.                         <th style="text-align: center;">電話號碼</th>  
  88.                         <th style="width:200px; text-align: center;">正文</th>  
  89.                         <th style="text-align: center;">時間</th>  
  90.                     </tr>  
  91.                     </thead>  
  92.                 <c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">  
  93.                     <tr id="${utcFeedback.deviceId }">  
  94.                         <td>${utcFeedback.email }</td>  
  95.                         <td>${utcFeedback.deviceId }</td>  
  96.                         <td>${utcFeedback.phoneNo }</td>  
  97.                         <!--  
  98.                         <td><a data-toggle="modal" data-target=".bs-example-modal-sm" href="javascript:void(0)">${utcFeedback.content }</a></td>  
  99.                         -->  
  100.                         <td>${utcFeedback.content }</td>  
  101.                         <td>${utcFeedback.opTimer }</td>  
  102.                     </tr>   
  103.                 </c:forEach>  
  104.                         <tr>  
  105.                             <td colspan="5">  
  106.                                 <c:if test="${page.totalCount > 0}">  
  107.                                     <c:choose>  
  108.                                         <c:when test="${page.pageNo == 1}">  
  109.                                             <a style="text-decoration: none">首頁</a>      
  110.                                             <a style="text-decoration: none">上一頁</a>      
  111.                                         </c:when>  
  112.                                         <c:otherwise>  
  113.                                             <a href="javascript:doPage(1);">首頁</a>      
  114.                                             <a href="javascript:doPage(${page.upPage});">上一頁</a>      
  115.                                         </c:otherwise>  
  116.                                     </c:choose>  
  117.                                     <c:choose>  
  118.                                         <c:when test="${page.pageNo == page.totalPage || page.totalPage == 0}">  
  119.                                             <a style="text-decoration: none">下一頁</a>      
  120.                                             <a style="text-decoration: none">末頁</a>      
  121.                                         </c:when>  
  122.                                         <c:otherwise>  
  123.                                             <a href="javascript:doPage(${page.nextPage});">下一頁</a>      
  124.                                             <a href="javascript:doPage(${page.totalPage});">末頁</a>      
  125.                                         </c:otherwise>  
  126.                                     </c:choose>  
  127.                                   
  128.                                 <a style="text-decoration: none">當前第${page.pageNo}頁</a>      
  129.                                 <a style="text-decoration: none">共${page.totalPage}頁</a>      
  130.                                 </c:if>  
  131.                                 <a style="text-decoration: none">共${page.totalCount}條數據</a>      
  132.                             </td>  
  133.                         </tr>  
  134.                 </table>  
  135.             </div>  
  136.           
  137.               
  138.               
  139.         </div>  
  140.      </div>  
  141.        
  142.     <div class="footer">  
  143.         <div class="container">  
  144.         </div>  
  145.     </div>  
  146.     <script type="text/javascript">  
  147.         function doPage(n){  
  148.             $('#flushDIV').html("");  
  149.             $.ajax({  
  150.                    type:"POST",  
  151.                    url:"<%=basePath%>apps/queryFeedBackInfo.do",  
  152.                    data:{pageNo:n},  
  153.                    dataType: "html",   //返回值類型       使用json的話也可以，但是需要在JS中編寫迭代的html代碼，如果格式樣式  
  154.                    cache:false,  
  155.                    success:function(data){  
  156.                        //var json = eval('('+msg+')');//拼接的json串  
  157.                        $('#flushDIV').html(data);  
  158.                    },  
  159.                    error:function(error){alert(error);}  
  160.                });  
  161.         }  
  162.     </script>  
  163.   
  164. </body>  
  165.   
  166. </html>  


conroller(具體DAO和Page類省略):
[java] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. /** 
  2.      * 顯示不同頁碼的反饋信息 
  3.      * @param request 
  4.      * @param response 
  5.      * @return 
  6.      * @throws Exception 
  7.      */  
  8.     @RequestMapping(value="/queryFeedBackInfo")  
  9.     public ModelAndView queryFeedBackInfo(HttpServletRequest request,HttpServletResponse response)throws Exception{  
  10.         UtcFeedbackDao utcFeedbackDao = new UtcFeedbackDao();  
  11.         int currentPage = request.getParameter("pageNo")==null?1:request.getParameter("pageNo").toString().trim()==""?1:Integer.parseInt(request.getParameter("pageNo").toString().trim());  
  12.         Pagination<UtcFeedback> page = null;//分頁幫助類  
  13.         page = utcFeedbackDao.findByCondition(currentPage,pagesize);  
  14.           
  15.         HashMap map = new HashMap();  
  16.         map.put("page", page);  
  17.         return new ModelAndView("app/temp",map);  
  18.     }  

temp.jsp:
[java] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  10. <html>  
  11. <head>  
  12. <base href="<%=basePath%>">  
  13.   
  14. <title>My JSP 'temp.jsp' starting page</title>  
  15.   
  16. <meta http-equiv="pragma" content="no-cache">  
  17. <meta http-equiv="cache-control" content="no-cache">  
  18. <meta http-equiv="expires" content="0">  
  19. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  20. <meta http-equiv="description" content="This is my page">  
  21. <!--  
  22.     <link rel="stylesheet" type="text/css" href="styles.css">  
  23.     -->  
  24.   
  25. </head>  
  26.   
  27. <body>  
  28.     <table class="table table-hover" style="text-align: center;table-layout: fixed;">  
  29.         <thead>  
  30.             <tr>  
  31.                 <th style="text-align: center;">郵箱地址</th>  
  32.                 <th style="text-align: center;">設備ID</th>  
  33.                 <th style="text-align: center;">電話號碼</th>  
  34.                 <th style="width:200px; text-align: center;">正文</th>  
  35.                 <th style="text-align: center;">時間</th>  
  36.             </tr>  
  37.         </thead>  
  38.         <c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">  
  39.             <tr id="${utcFeedback.deviceId }">  
  40.                 <td>${utcFeedback.email }</td>  
  41.                 <td>${utcFeedback.deviceId }</td>  
  42.                 <td>${utcFeedback.phoneNo }</td>  
  43.                 <td>${utcFeedback.content }</td>  
  44.                 <td>${utcFeedback.opTimer }</td>  
  45.             </tr>  
  46.         </c:forEach>  
  47.         <tr>  
  48.             <td colspan="5"><c:if test="${page.totalCount > 0}">  
  49.                     <c:choose>  
  50.                         <c:when test="${page.pageNo == 1}">  
  51.                             <a style="text-decoration: none">首頁</a>      
  52.                             <a style="text-decoration: none">上一頁</a>      
  53.                         </c:when>  
  54.                         <c:otherwise>  
  55.                             <a href="javascript:doPage(1);">首頁</a>      
  56.                             <a href="javascript:doPage(${page.upPage});">上一頁</a>      
  57.                         </c:otherwise>  
  58.                     </c:choose>  
  59.                     <c:choose>  
  60.                         <c:when  
  61.                             test="${page.pageNo == page.totalPage || page.totalPage == 0}">  
  62.                             <a style="text-decoration: none">下一頁</a>      
  63.                             <a style="text-decoration: none">末頁</a>      
  64.                         </c:when>  
  65.                         <c:otherwise>  
  66.                             <a href="javascript:doPage(${page.nextPage});">下一頁</a>      
  67.                             <a href="javascript:doPage(${page.totalPage});">末頁</a>      
  68.                         </c:otherwise>  
  69.                     </c:choose>  
  70.   
  71.                     <a style="text-decoration: none">當前第${page.pageNo}頁</a>      
  72.                     <a style="text-decoration: none">共${page.totalPage}頁</a>      
  73.                     </c:if> <a style="text-decoration: none">共${page.totalCount}條數據</a>      
  74.             </td>  
  75.         </tr>  
  76.     </table>  
  77. </body>  
  78. </html> 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章