java,jq,ajax写分页

1.先写好html基础样式

我懒得去写css样式233，能看就行

    <style>
        #page {
            width: 20px;
        }
    </style>
<table>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>pwd</th>
        <th>age</th>
    </tr>
    <tbody id="res">

    </tbody>
</table>
<button id="up_btn">上一页</button>
<span><input type="text" id="page"><span id="pages"></span></span>
<button id="down_btn">下一页</button>

2.编写servlet

• 2.1 先写查询数据库总条数的servlet LoadServlet

        //WorkerDaoImpl是我自己写的数据库操作类
        WorkDaoImpl workDao=new WorkDaoImpl();
        int count =0;
        try {
            //查询总条数
           count = workDao.queueCountWorker();
        } catch (Exception e) {
            e.printStackTrace();
        }
        //传输类型为json，编码为utf-8
        response.setContentType("application/json;charset=utf-8");
        //Java对象转换JSON，导入的是Jackson的包
        ObjectMapper mapper=new ObjectMapper();
        Map<String,Object> map=new HashMap<>();
        map.put("count",count);
        mapper.writeValue(response.getWriter(),map);
        //将总条数写入ServletContext域，避免多次查询浪费资源
        ServletContext sc = this.getServletContext();
        sc.setAttribute("count",count);

• 2.2 编写查询数据的servlet QueueAllWorkersServlet

       //获取前端传来的页码数
        int page = Integer.parseInt(request.getParameter("page"));
        //从ServletContext中获取总条数
        ServletContext sc = this.getServletContext();
        int count = (Integer) sc.getAttribute("count");

        List<Worker> workers = null;
        WorkDaoImpl workDao = new WorkDaoImpl();
        try {
            //当页码小于1，显示第一页的数据
            if (page<1){
                workers = workDao.queueAllWorker(0, 5);
                //当页码大于最大页数，显示最大页数的数据
            }else if (page>Math.ceil(((double)count)/5)){
                workers = workDao.queueAllWorker((int)Math.ceil(((double)count)/5)-1, 5);
            }else {
                workers = workDao.queueAllWorker((page - 1) * 5, 5);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //数据类型为json，字符集为utf-8
        response.setContentType("application/json;charset=utf-8");
        //数据传出
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), workers);

• 2.3 补充：JSON数据和Java对象的相互转换

  • JSON解析器：
  • 常见的解析器：Jsonlib，Gson，fastjson，jackson

  • 1.JSON转为Java对象

      1. 导入jackson的相关jar包
      2. 创建Jackson核心对象 ObjectMapper
      3. 调用ObjectMapper的相关方法进行转换
      	1. readValue(json字符串数据,Class)
    

  • 2. Java对象转换JSON

      1. 使用步骤：
      	1. 导入jackson的相关jar包
      	2. 创建Jackson核心对象 ObjectMapper
      	3. 调用ObjectMapper的相关方法进行转换
      		1. 转换方法：
      			* writeValue(参数1，obj):
                      参数1：
                          File：将obj对象转换为JSON字符串，并保存到指定的文件中
                          Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                          OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                  * writeValueAsString(obj):将对象转为json字符串
    
      		2. 注解：
      			1. @JsonIgnore：排除属性。
      			2. @JsonFormat：属性值得格式化
      				* @JsonFormat(pattern = "yyyy-MM-dd")
    
      		3. 复杂java对象转换
      			1. List：数组
      			2. Map：对象格式一致
    

3.ajax编写

• 3.1 源码

        $(function () {
            var page = 1;
            var pages = 1;
            ;
            $("#page").val(page);

            //查询方法
            function ser() {
                $.post("QueryAllWorkers2Servlet", {page: page}, function (data) {
                    //拼接字符串最后写入到res中
                    var str = "";
                    //遍历data数组
                    for (var i = 0; i < data.length; i++) {
                        //获取data当前的json
                        var user = data[i];
                        str += "<tr>";
                        //遍历json
                        for (var key in user) {
                            str = str + "<td>" + user[key] + "</td>";

                        }
                        str = str + "</tr>";
                    }
                    $("#res").html(str);
                });
            }

            //刷新后自动获取最大页码
            function load() {
                $.post("LoadServlet", null, function (data) {
                    pages = Math.ceil(data["count"] / 5);
                    $("#pages").text("/" + pages);
                })
            }

            load();
            ser();
            //下一页点击事件
            $("#down_btn").click(function () {
                page = page + 1;
                //检验
                if (page > pages) {
                    page = pages;
                }
                //将page中的值改为修改后的页码
                $("#page").val(page);
                ser();

            });
            //上一页点击事件
            $("#up_btn").click(function () {
                page = page - 1;
                //检验
                if (page < 1) {
                    page = 1;
                }
                //修改
                $("#page").val(page);
                ser();

            });
            //page输入框失去焦点事件
            $("#page").blur(function () {
                page = parseInt($("#page").val());
                //校验，若输入的值大于最大页码数，则将页码变为最大页码数
                if (page > pages) {
                    page = pages;
                    //校验，若输入的值小于1，则将页码变为1
                } else if (page < 1) {
                    page = 1;
                }
                $("#page").val(page);
                ser();
            });

        });

• 3.2 补充 ajax参数

    	1. $.ajax()
    		* 语法：$.ajax({键值对});
    		 //使用$.ajax()发送异步请求
                $.ajax({
                    url:"ajaxServlet1111" , // 请求路径
                    type:"POST" , //请求方式
                    //data: "username=jack&age=23",//请求参数
                    data:{"username":"jack","age":23},
                    success:function (data) {
                        alert(data);
                    },//响应成功后的回调函数
                    error:function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
    
                    dataType:"text"//设置接受到的响应数据的格式
                });
    	2. $.get()：发送get请求
    		* 语法：$.get(url, [data], [callback], [type])
    			* 参数：
    				* url：请求路径
    				* data：请求参数
    				* callback：回调函数
    				* type：响应结果的类型
  
    	3. $.post()：发送post请求
    		* 语法：$.post(url, [data], [callback], [type])
    			* 参数：
    				* url：请求路径
    				* data：请求参数
    				* callback：回调函数
    				* type：响应结果的类型