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：響應結果的類型
