zoukankan      html  css  js  c++  java
  • 分页管理的AJAX实现

    bookMgr.jsp

      1 <%-- 
      2     Document   : bookMgr.jsp
      3     Created on : 2016-11-7, 9:48:21
      4     Author     : guanghe
      5 --%>
      6 
      7 <%@page contentType="text/html" pageEncoding="UTF-8"%>
      8 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
      9 <!DOCTYPE html>
     10 <html>
     11     <head>
     12         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     13         <title>主页面</title>
     14         <script src="js/jquery.js"></script>
     15         <style>
     16             .user
     17             {
     18                 display:block;
     19                 50%;
     20                 text-align: right;
     21             }
     22             table ,tr ,td, th
     23             {
     24                 text-align: center;
     25                 border:1px black solid;
     26                 border-collapse:collapse;
     27             }
     28             .setGray
     29             {
     30                 background-color: gray;
     31             }
     32             .over
     33             {
     34                 background-color:#f9360d;
     35             }
     36         </style>
     37         <script>
     38             function logout()
     39             {
     40                 $.ajax
     41                 ({
     42                     url:"logServlet.action",
     43                     data:{"option":"logout"},
     44                     type:"post",
     45                     dataType:"json",
     46                     success:function(data)
     47                     {
     48                         var option = data;
     49                         if(option == "true")
     50                         {
     51                             window.location.href = "login.jsp";
     52                         }
     53                         else if(option == "false")
     54                         {
     55                             alert("注销失败,请稍后重试!");
     56                         }
     57                         else if(option == "login")
     58                         {
     59                             window.location.href = "login.jsp";
     60                         }
     61                     },
     62                     error:function(data)
     63                     {
     64                         alert("服务器忙,请稍后重试!");
     65                     }
     66                 });
     67             }
     68             function query(currentPageNum,pageItemsCount)
     69             {
     70                 var bookClass = $("#bookClass").val();
     71                 var bookName = $("#bookName").val();
     72                 var isBorrow = $("#isBorrow").val();
     73                 
     74                 var showDiv = $("#showDiv");
     75                 showDiv.html("");
     76                 $.ajax
     77                 ({
     78                     url:"queryServlet.action",
     79                     data:
     80                     {
     81                         "bookClass":bookClass,
     82                         "bookName":bookName,
     83                         "isBorrow":isBorrow,
     84                         "currentPageNum":currentPageNum,
     85                         "pageItemsCount":pageItemsCount,
     86                         "option":"queryBook"
     87                     },
     88                     type:"post",
     89                     dataType:"json",
     90                     success:function(data)
     91                     {
     92                         if(data == "login")
     93                         {
     94                             window.location.href = "login.jsp";
     95                             return;
     96                         }
     97                         var page = data;
     98                         var bookList = page.dataList;
     99                         showDiv.html("");
    100                         var table = $("<table width='700px' id='showTable'>");
    101                         table.append("<tr><th>编号</th><th>分类</th><th>名称</th><th>作者</th><th>出版社</th><th>是否借阅</th></tr>");
    102                         if(bookList == "" || bookList == null)
    103                         {
    104                             table.append("<tr><td colspan='6'>对不起,没有查询到任何结果!</td></tr>");
    105                         }
    106                         else
    107                         {
    108                             for(var i = 0; i < bookList.length; i++)
    109                             {
    110                                 var content = "<tr>"+"<td>"+bookList[i].bookCode+"</td>"+
    111                                         "<td>"+bookList[i].bookType+"</td>"+
    112                                         "<td>"+bookList[i].bookName+"</td>"+
    113                                         "<td>"+bookList[i].bookAuthor+"</td>"+
    114                                         "<td>"+bookList[i].publishPress+"</td>";
    115                                 if(bookList[i].isBorrow == 1)
    116                                 {
    117                                     content += "<td>已借阅</td></tr>";
    118                                 }
    119                                 else
    120                                 {
    121                                     content += "<td><a href='javascript:order("+JSON.stringify(bookList[i])+","+currentPageNum+","+pageItemsCount+");'>申请借阅</a></td></tr>";
    122                                 }
    123                                 table.append(content);
    124                             }
    125                             showPage(page);
    126                         }
    127                         showDiv.append(table);
    128                         setTableColor();
    129                     },
    130                     error:function(data)
    131                     {
    132                         alert("服务器忙,请稍后重试!");
    133                     }
    134                 });
    135             }
    136             function setTableColor()
    137             {
    138                 var table = $("#showTable")[0];
    139                 for(var i = 0; i < table.rows.length; i++)
    140                 {
    141                     if(i % 2 == 0)
    142                     {
    143                         table.rows[i].className = "setGray";
    144                     }
    145                     var name;
    146                     table.rows[i].onmouseover = function()
    147                     {
    148                         name = this.className;
    149                         this.className = "over";
    150                     }
    151                     table.rows[i].onmouseout = function()
    152                     {
    153                         this.className = name;
    154                     }
    155                 }
    156             }
    157             function showPage(page)
    158             {
    159                 var pageDiv = $("#pageDiv");
    160                 pageDiv.html("");
    161                 pageDiv.append("<a href='javascript:query("+page.firstPageNum+","+page.pageItemsCount+");'>首页</a>&nbsp;&nbsp;");
    162                 if(page.currentPageNum - 2 >= page.firstPageNum)
    163                 {
    164                     pageDiv.append("<a href='javascript:query("+(page.prePageNum-1)+","+page.pageItemsCount+");'>"+(page.currentPageNum-2)+"</a>&nbsp;&nbsp;");
    165                 }
    166                 if(page.hasPrePage)
    167                 {
    168                     pageDiv.append("<a href='javascript:query("+page.prePageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum-1)+"</a>&nbsp;&nbsp;");
    169                 }
    170                    pageDiv.append("<span style='color:green;font-weight:bold;'>"+page.currentPageNum+"</span>&nbsp;&nbsp;");
    171                 if(page.hasNextPage)
    172                 {
    173                     pageDiv.append("<a href='javascript:query("+page.nextPageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum+1)+"</a>&nbsp;&nbsp;");
    174                 }
    175                 if(page.currentPageNum + 2 <= page.lastPageNum)
    176                 {
    177                     pageDiv.append("<a href='javascript:query("+(page.nextPageNum+1)+","+page.pageItemsCount+");'>"+(page.currentPageNum+2)+"</a>&nbsp;&nbsp;");
    178                 }
    179                 pageDiv.append("<a href='javascript:query("+page.lastPageNum+","+page.pageItemsCount+");'>尾页</a>&nbsp;&nbsp;");
    180                 pageDiv.append("共"+page.pageCount+"页");
    181             }
    182             function order(book,currentPageNum,pageItemsCount)
    183             {
    184                 if(confirm("确定要订阅"+book.bookName+"吗?"))
    185                 {
    186                     $.ajax
    187                     ({
    188                         url:"queryServlet.action",
    189                         data:{"option":"order","bookCode":book.bookCode},
    190                         type:"post",
    191                         dataType:"json",
    192                         success:function(data)
    193                         {
    194                             if(data)
    195                             {
    196                                 alert("订阅成功!");
    197                                 query(currentPageNum,pageItemsCount);
    198                             }
    199                             else
    200                             {
    201                                 alert("订阅失败!");
    202                             }
    203                         }
    204                     });
    205                 }
    206             }
    207         </script>
    208     </head>
    209     <body>
    210         <div align="center">
    211             <h1>图书借阅系统</h1>
    212             图书分类:<select id="bookClass">
    213             <option value="0">---请选择---</option>
    214             <c:forEach items="${bookClass}" var="clazz"  >
    215                 <option value="${clazz.key} ">${clazz.value} </option>
    216             </c:forEach>
    217             </select>&nbsp;
    218             图书名称:<input type="text" id="bookName" />&nbsp;
    219             是否借阅:<select id="isBorrow">
    220             <option value="0">---请选择---</option>
    221             <option value="1">已借阅</option>
    222             <option value="2">未借阅</option>
    223             </select>&nbsp;
    224             <input type="button" id="query" value="查询" onclick="query(1,10);"/></br></br>
    225             <span class="user">当前登录用户:${user.username}&nbsp;<a href="javascript:void(0)" onclick="logout();">退出</a></span></br>
    226             <div id="showDiv"></div></br>
    227             <div id="pageDiv"></div>
    228         </div>
    229     </body>
    230 </html>

     

  • 相关阅读:
    css3的clip-path方法剪裁实现
    vue-cli3.0之vue.config.js的配置项(注解)
    用Canvas实现一些简单的图片滤镜
    转《图像处理之表面滤波》
    vue-axios的application/x-www-form-urlencod的post请求无法解析参数
    如何在linux中执行一个脚本
    列表、字典、元组小练习
    开发脚本自动部署及监控
    固化命令的方式、sed文本处理工具
    nginx服务、nginx反向代理和nfs共享服务
  • 原文地址:https://www.cnblogs.com/guanghe/p/6049535.html
Copyright © 2011-2022 走看看