zoukankan      html  css  js  c++  java
  • Ajax异步刷新分页功能-MySQL

    1.Servlet中代码

           /** 条件Map */
                Map<String, Object> map=new HashMap<String, Object>();
                
                /** 分页配置 */
                int index = request.getParameter("index")==null?1:Integer.parseInt(request.getParameter("index"));
                int size=2;
                map.put("index", (index-1)*size);
                map.put("size", size);
           /** 根据用户不同的请求进入不同的响应操作 */
                String method = request.getParameter("method");
                boolean mark=false;
                if(method!=null){
                    if(method.equals("paging")){
                        /**执行分页操作 */
                        mark=true;
                    }
                }
           /** 得到用户添加到购物车中的商品集合 */
                List<Entry> entrys = session.getMapper(EntryDao.class).selectUsEntry(map);
                if(mark){
                    String entrysJson = JSONArray.fromObject(entrys).toString();
                    out.print(entrysJson);
                    return;
                }
                /** 得到总条数 算出总页数 */
                Integer entryCount = session.getMapper(EntryDao.class).entryCount(map);
                int totalPage=entryCount%size==0?entryCount/size:entryCount/size+1;
                /** 响应结果 */
                request.setAttribute("entrys", entrys);//得到用户的购物车
                request.setAttribute("totalPage", totalPage);//总条数
                
                /** 转发跳转 */
                request.getRequestDispatcher("page/crat_page.jsp").forward(request, response);

    此为JSP的代码

     <body>
        <table id="ver-minimalist"   >
            <thead>
                <tr>
                    <th>类别</th>
                    <th>商品名字</th>
                    <th>普通价格</th>
                    <th>会员价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
         <tbody id="tbodyEntry" >
            <c:forEach items="${requestScope.entrys}" var="entry" >
                <tr>
                    <td>${entry.commodity.variety.nickName }</td>
                    <td>${entry.commodity.nickName }</td>
                    <td>${entry.commodity.ordinaryPrice }</td>
                    <td>${entry.commodity.memberPrice }</td>
                    <td>${entry.quantity }</td>
                    <td align="center">
                        <input type="button" value="删除" onclick="" />
                    </td>
                </tr>
            </c:forEach>
        </tbody>
        <thead>
            <tr>
                <th colspan="6" align="right" ><input type="button" value="结算" onclick="" /></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="6" align="right"" width="30px" >
                        <input type="button" value="首页" id="firstpage" />
                        <input type="button" value="上页" id="beforepage" />
                        <input type="button" value="下页" id="nextpage" />
                        <input type="button" value="尾页" id="lastpage" />
                        <span id="index" >1</span><span id="totalPage" >${requestScope.totalPage}</span><!-- 此为当前页,与总页数 -->
                </td>
        </tr>
    </tbody>

    此为JQuerty的代码

                /** 全局变量 */
                var index = 1;
                var totalPage = 0;
                
                /** 分页窗体事件 */
                $(function () {
                    /**取从Servlect中传到JSP页面的总条数信息 给全局变量totalPage 赋值
                     * 下为JSP页面中显示当前页和总页数
                     * <span id="index" >1</span><span id="totalPage" >${requestScope.senior.totalPage}</span> 
                     */
                    totalPage=$("#totalPage").html();
                       //首页
                       $('#firstpage').click(function () {
                           if (index != 1) {
                               index = 1;
                               paging();/** 点击分页异步刷新函数 */
                           } 
                           return false;
                       });
                       //尾页
                       $('#lastpage').click(function () {
                           if (index != totalPage) {
                               index = totalPage;
                               paging();
                           }
                           return false;
                       });
                       //上一页
                       $("#beforepage").click(function () {
                           if (index != 1) {
                               index = index - 1;
                               paging();
                           }
                           return false;
                       });
    
                       //下一页
                       $("#nextpage").click(function () {
                           if (index < totalPage) {
                               index = index + 1;
                               paging();
                           }
                           return false;
                       });
    
                   })
    
                   /** 点击分页 */
                 function paging(){
                     ajaxBase("cartPageServlet?method=paging","index="+index,"paging");
                     /** 给页面显示当前页赋值 */
                    $("#index").html(index);
                 }
                
                
                /** ajax函数工具类
                  * @param url:地址
                  * @param data:请求参数
                  * @param method:方法信号,作用判断进行什么操作
                  */
                 function ajaxBase(url,data,method){
                   $.ajax({
                       type:'post',
                        url:''+url+'',
                        cache:false,
                        data:data,
                        dataType:'text',
                        success:function(result){
                            alert("ajax函数工具类:success");
                            /** 调用请求成功后的操作函数 */
                            success(result,method);
                        },
                        error:function(){
                            alert("ajax函数工具类:error");
                        }
                   });
                 }
                
                
                 /** 根据method方法信号判断进行什么操作 
                  * @param result:服务端响应的数据
                  * @param method:方法信号,作用判断进行什么操作
                  */
                function success(result,method){
                    if(method=="paging"){
                        $("#tbodyEntry").children().remove();
                        var result = eval("("+result+")");
                        var append="";
                        for(var rst in result){
                            append=append+""
                                +"<tr>"
                                    +"<td>"+result[rst].commodity.variety.nickName+"</td>"
                                    +"<td>"+result[rst].commodity.nickName+"</td>"
                                    +"<td>"+result[rst].commodity.ordinaryPrice +"</td>"
                                    +"<td>"+result[rst].commodity.memberPrice +"</td>"
                                    +"<td>"+result[rst].quantity +"</td>"
                                    +"<td align='center'>"
                                        +"<input type='button' value='删除' onclick='javascript:alert('执行删除操作:'"+result[rst].id +")' />"
                                    +"</td>"
                                +"</tr>"
                        }
                        $("#tbodyEntry").append(append);
                    }
                }
  • 相关阅读:
    javaEE的三层结构:web层、service层、dao层
    shell 流水账
    Git笔记(流水账)
    Openstack搭建(流水账)
    shell数组脚本
    linux配置邮箱服务
    Linux产生随机数的几种方法
    MySQL主从复制原理及配置过程
    安装并配置多实例Mysql数据库
    Nginx防盗链配置
  • 原文地址:https://www.cnblogs.com/wkrbky/p/5873500.html
Copyright © 2011-2022 走看看