java,jq,ajax写分页
- 2020 年 3 月 31 日
- 筆記
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：响应结果的类型
