JavaEE三層架構實現ajax分頁查詢
開發環境:
第一步:代碼實現之前期準備
在IDEA中開發前期配置的工作,網上的帖子很多,我在這裡就不再贅述.主要說三點
在服務器的配置中,紅色框框的兩項要選擇update classes and resource ,選擇了之後可以實現熱部署.
要在此處填寫項目的名稱.作為項目的根路徑
導入jar包的方式如圖所示,在dependencie中點擊加號,選中自己創建好的lib文件夾
導入相關的jar包: c3p0的jar包、DbUtils工具類jar包、fastJson的jar包、mysql驅動jar包
在數據庫test03的product表中寫入如下的數據
在IDEA中為工程分包,以及導入c3p0連接池的配置
注意,c3p0配置文件,要修改成自己的數據庫名稱,以及數據庫密碼
在domain包中,創建Product實體類,根據數據庫中product表的字段,在Product類中,書寫對應的屬性.生成get set方法.
創建獲取連接池對象的工具類
第二步:無分頁查詢所有的商品信息
實現思路:
jsp/html----->servlet(web層處理請求與響應的數據) -----------> service(service層處理邏輯)----------->dao(dao層處理數據庫操作)
創建產品頁面，向服務器發送請求（獲取所有產品信息）
前端使用了bootstrap響應式開發,可以讓頁面更加美觀,開發更加便捷
頁面信息的代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品展示列表</title> <!--引入bootstrap相關文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> //頁面加載時,向服務器發送請求,接收全部的商品數據$(function () { //===================未分頁,展示所有數據=============================== var url ="/ajax_product/product"; //=====向服務器發送post請求$.post(url,function (data) { //解析服務器端傳過來的全部數據//============================向表格中展示商品信息var products = eval(data); //遍歷數據for (var i = 0; i < products.length; i++) { //遍歷每一行的數據var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 並添加到表格中,添加數據到表格中$("#tab").append(protd); } },"json") })</script><body><h3 align="center">促銷商品展示</h3><div> <!--商品的表格佔一行--> <div> <div> <!--table-hover表示當鼠標移入這一行表格的時候,顏色變化table-bordered表示給表格加邊框--> <table id="tab"> <tr> <th>編號</th> <th>商品名稱</th> <th>商品數量</th> <th>商品單價</th> </tr> </table> </div> </div></div></body></html>創建一個servlet來接收請求，獲取所有的產品信息
在IDEA中,創建servlet如下圖所示
在這裡不勾選自動生成註解
點擊ok之後,IDEA會自動跳轉到web.xml文件中,自動寫好了Servlet的全路徑名,只需寫url-pattern即可
注意url-pattern需要寫得與ajax請求中的Servlet一致.
web層Servlet的代碼如下:
package com.thc.web;import com.alibaba.fastjson.JSONObject;import com.thc.service.ProductService;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.SQLException;import java.util.List;public class Product extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //處理響應與請求的亂碼request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //由於是顯示所有的產品信息,沒有參數接收//需要調用服務層查找所有數據的方法,獲取結果,響應給客戶端ProductService service = new ProductService(); try { //調用業務層的方法,獲取所有的商品List<com.thc.domain.Product> allProuct = service.findAllProuct(); //把得到的數據,轉為json類型的數據String jsonString = JSONObject.toJSONString(allProuct); //回寫給瀏覽器response.getWriter().write(jsonString); } catch (SQLException e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}在service層，從dao層獲取數據，返回給web層的Servlet
web層調用service層的代碼如下
package com.thc.service;import com.thc.dao.ProductDao;import com.thc.domain.Product;import java.sql.SQLException;import java.util.List;public class ProductService { //在service層,從dao層獲取數據,返回數據給web層public List<Product> findAllProuct() throws SQLException { ProductDao dao = new ProductDao(); //調用dao層查詢所有的商品List<Product> allProduct = dao.findAllProduct(); return allProduct; }}在dao層從服務器中查詢數據,給service層
package com.thc.dao;import com.thc.domain.Product;import com.thc.utils.JdbcUtils;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanListHandler;import java.sql.SQLException;import java.util.List;//=================dao層專門負責數據庫操作public class ProductDao { //===========查詢所有商品信息public List<Product> findAllProduct() throws SQLException { //利用dbutils,創建QueryRunner核心對象QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); //書寫sql語句,查詢所有的商品String sql = "select * from product"; //把商品到的商品,轉為list集合,泛型為product List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class)); return products; }}dao層拿到數據後,傳遞給service層,service層再傳遞給web層的servlet,servlet拿到數據後,是保存在list集合中的,再把list集合轉為json數據類型,寫給瀏覽器.前端頁面中的如下代碼,就是在解析servlet返回的json數據
$.post(url,function (data) { //解析服務器端傳過來的全部數據//============================向表格中展示商品信息var products = eval(data); //遍歷數據for (var i = 0; i < products.length; i++) { //遍歷每一行的數據var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 並添加到表格中,添加數據到表格中$("#tab").append(protd); } },"json")通過谷歌瀏覽器自帶的抓包工具,可以看到servlet響應的數據
把響應的數據全部複製下來,就是如下的數據.一個數組中嵌套了產品的對象.
對像中都是以鍵值對的形式存在的.
例如第一個數據中,鍵為count,值為100. 鍵為id,值為1,鍵為name,值為電視機,鍵為price 值為2000
[ {"count":100,"id":1,"name":"電視機","price":2000}, {"count":200,"id":2,"name":"洗衣機","price":1000}, {"count":300,"id":3,"name":"空調","price":3000}, {"count":50,"id":4,"name":"投影儀","price":2000}, {"count":1000,"id":5,"name":"HP電腦","price":4000}, {"count":100,"id":6,"name":"蘋果手機","price":5000}, {"count":60,"id":7,"name":"縫紉機","price":2000}, {"count":100,"id":8,"name":"小米盒子","price":2200}, {"count":300,"id":9,"name":"飲水機","price":2000}, {"count":200,"id":10,"name":"淨水器","price":2000}, {"count":500,"id":11,"name":"電暖器","price":2000}, {"count":100,"id":12,"name":"榨汁機","price":399}, {"count":200,"id":13,"name":"電壓力鍋","price":498}, {"count":300,"id":14,"name":"電飯煲","price":299}, {"count":50,"id":15,"name":"微波爐","price":1299}, {"count":200,"id":16,"name":"豆漿機","price":199}, {"count":300,"id":17,"name":"電磁爐","price":398}, {"count":500,"id":18,"name":"加濕器","price":99}, {"count":250,"id":19,"name":"剃須刀","price":98}, {"count":1000,"id":20,"name":"舒膚佳","price":16.5}, {"count":1200,"id":21,"name":"雕牌","price":8.8}, {"count":1500,"id":22,"name":"立白","price":9.9}]不分頁的情況下,展示的效果如下:
一個頁面中,把所有的數據都展示出來了,如果數據非常多,例如上百度搜索一個關鍵詞,結果可能有上萬上億條,一次性從數據庫中,拿這麼多的結果給瀏覽器,是很長的時間的,用戶體驗極差,因此需要分頁技術.採用物理分頁,
一次只從數據庫中查詢當前頁面需要的信息.
第三步:傳遞當前頁面數和每頁顯示的數量給服務器
html頁面中需要增加當前頁面數和每頁顯示的數量這兩個變量,傳遞給服務器
更改代碼的如下圖所示:
在servlet層需要接收參數,並且從service層查詢對應的當前頁的數據,代碼如下:
public class Product extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //處理響應與請求的亂碼request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //當前頁面int pageNo = Integer.parseInt(request.getParameter("pageNo")); //每頁的顯示條數int pageSize = Integer.parseInt(request.getParameter("pageSize")); //由於是顯示所有的產品信息,沒有參數接收//需要調用服務層查找所有數據的方法,獲取結果,響應給客戶端ProductService service = new ProductService(); try { //根據當前頁和每頁顯示的數目,來從service層,獲取數據List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize); String jsonString = JSONObject.toJSONString(product); //回寫給瀏覽器response.getWriter().write(jsonString); } catch (SQLException e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}service層新增的查找當前頁面數據方法
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao(); List<Product> product = dao.findProduct(pageNo, pageSize); return product; }dao層新增的從數據庫查找當前頁面的方法
public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); String sql ="select * from product limit ?,?"; //limit第一個參數:從數據庫中的哪裡開始查,索引是從0開始的//第二個參數:每次查多少個//第一個參數的規律是:當前頁數減一,乘以每頁查詢的個數List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize); return productList; }瀏覽器端顯示如下圖所示:每次只會顯示pageSize(當前的值為6)個數的商品信息.
但是還不能動態的通過點擊頁面按鈕來實現翻頁.
那麼就要考慮頁面如何顯示分頁條以及數據該如何封裝？
我們知道頁面的分頁條顯示的頁數是動態變化的，總頁數=數據的總條數/每頁顯示的數據，要向上取整。也就是說，我們的頁面除了需要List<Product>數據之外，還需要數據的總條數、總頁數、當前頁、每頁顯示數量。另外當前頁pageNo也是動態變化的，在頁面上點擊多少頁，pageNo就是幾。所以， 我們需要再創建一個javabean（PageBean.java）來封裝這些數據，在服務端得到這些數據之後轉成json數據發送給客戶端顯示。
第四步:將頁面的相關數據封裝為一個JavaBean
在domain包內創建一個類,名為PageBean,屬性如下:
private int pageNo;//當前頁數private int pageSize;//每頁顯示的數量private int totalCount;//一共有多少個商品信息數據private int totalPage;//一共有多少頁數據private List<Product> products;//商品信息數據的集合
在web層傳遞service層當前頁面數(pageNo),和每頁顯示的條數(pageSize),返回給web層一個PageBean
web層的最終代碼如下
public class Product extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //處理響應與請求的亂碼request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //當前頁面int pageNo = Integer.parseInt(request.getParameter("pageNo")); //每頁的顯示條數int pageSize = Integer.parseInt(request.getParameter("pageSize")); //由於是顯示所有的產品信息,沒有參數接收//需要調用服務層查找所有數據的方法,獲取結果,響應給客戶端ProductService service = new ProductService(); try { /* 調用業務層的方法,獲取所有的商品List<com.thc.domain.Product> allProuct = service.findAllProuct(); 把得到的數據,轉為json類型的數據String jsonString = JSONObject.toJSONString(allProuct);*/ //根據當前頁和每頁顯示的數目,來從service層,獲取數據//List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize); //===============從web層拿到pagebean的數據================================= PageBean pageBean = service.findPageInfo(pageNo, pageSize); //===============把數據轉為json=============================== String jsonString = JSONObject.toJSONString(pageBean); //================回寫給瀏覽器==================== response.getWriter().write(jsonString); } catch (SQLException e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}在service需要獲取pageBean的全部信息,pageNo和pageSize是已知的.需要從dao層獲取商品的信息數據,LIst集合,還需要獲取總的商品信息數據totalCount.總共有多少頁可以通過總數據除以每頁顯示的數據,並向上取整.
service層的最終代碼如下:
public class ProductService { //在service層,從dao層獲取數據,返回數據給web層//=========Service層處理所有商品信息的數據給web層==================== public List<Product> findAllProuct() throws SQLException { ProductDao dao = new ProductDao(); //調用dao層查詢所有的商品List<Product> allProduct = dao.findAllProduct(); return allProduct; } //============service層查詢某個特定頁面的數據給web層================================= public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao(); List<Product> product = dao.findProduct(pageNo, pageSize); return product; } //============service層封裝pagebean數據=================================== public PageBean findPageInfo(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao(); List<Product> product = dao.findProduct(pageNo, pageSize); int totalCount = dao.findTotalCount(); PageBean pb = new PageBean(); //封裝數據pb.setTotalCount(totalCount); pb.setPageNo(pageNo); pb.setPageSize(pageSize); pb.setProducts(product); //向上取整,計算總頁數,不要忘了乘以1.0,否則會少一頁數據int totalPage = (int) Math.ceil(totalCount*1.0/pageSize); pb.setTotalPage(totalPage); //把數據給servlet return pb; }}在dao層,新增了一個方法,用於查詢數據庫總信息的總個數
dao層最終的代碼如下
//=================dao層專門負責數據庫操作public class ProductDao { //===========查詢所有商品信息public List<Product> findAllProduct() throws SQLException { //利用dbutils,創建QueryRunner核心對象QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); //書寫sql語句,查詢所有的商品String sql = "select * from product"; //把商品到的商品,轉為list集合,泛型為product List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class)); return products; }//=======================查詢當前頁的產品信息===================== public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); String sql ="select * from product limit ?,?"; //limit第一個參數:從數據庫中的哪裡開始查,索引是從0開始的//第二個參數:每次查多少個//第一個參數的規律是:當前頁數減一,乘以每頁查詢的個數List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize); return productList; }//===============查詢總共有多少條數據================= public int findTotalCount() throws SQLException { QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); String sql = "select count(*) from product"; Long countL =(Long) qr.query(sql, new ScalarHandler()); return countL.intValue(); }}第五步:處理前端頁面
在table標籤的下面,增加一行,提供分頁的組件.並把li代碼註釋掉,因為需要動態展示.
先聲明需要接收的參數變量
var url ="/ajax_product/product";var pageNo=1;//當前頁面設置為1var pageSize=6;//每頁顯示6條商品信息var totalPage;//一共有多少頁數據var products;//商品的數據信息
寫好了ajax的post請求之後,抓包測試瀏覽器是否接收到數據
$.post( url,//給服務器傳送數據的地址{"pageNo": pageNo, "pageSize": pageSize},//給瀏覽器傳遞當前頁面數和每頁顯示的條數function (data) {})在抓包拿到瞭如下的數據
{"pageNo":1, "pageSize":6, "products":[{"count":100,"id":1,"name":"電視機","price":2000}, {"count":200,"id":2,"name":"洗衣機","price":1000}, {"count":300,"id":3,"name":"空調","price":3000}, {"count":50,"id":4,"name":"投影儀","price":2000}, {"count":1000,"id":5,"name":"HP電腦","price":4000}, {"count":100,"id":6,"name":"蘋果手機","price":5000}], "totalCount":22, "totalPage":3}說明服務器端能夠正常給瀏覽器響應數據.再接著寫前端代碼
顯示表格中的數據
先將後端得到的數據解析,再同步到js代碼中,通過pagebean.products獲得所有product對象的數據的數組,再遍歷這個數組,把product屬性的值拼接到表格中去.
代碼如下
$.post( url,//給服務器傳送數據的地址{"pageNo": pageNo, "pageSize": pageSize},//給瀏覽器傳遞當前頁面數和每頁顯示的條數function (data) { //解析服務器端傳過來的全部pagebean數據,格式為json類型var pagebean = eval(data); //同步數據pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //顯示表格中的數據=============================================== for (var i = 0; i < products.length; i++) { //遍歷每一行的數據var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td> <td>"+products[i].count+"</td><td>"+products[i].price+"</td> </tr>"); // 並添加到表格中,添加數據到表格中$("#tab").append(protd); } },"json")這段代碼寫完後,可開啟服務器,測試能否獲取數據到表格中.經測試成功顯示數據.
顯示分頁條的數據
先顯示上一頁與下一頁的數據
//顯示分頁條的數據//先不考慮功能,先能顯示出來//顯示上一頁var preLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a></li>');//通過類選擇器,添加進去$(".pager").append(preLi);//顯示下一頁var nextLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a></li>');//通過類選擇器,添加進去$(".pager").append(nextLi);進測試效果如下:
顯示頁碼數據:
//顯示分頁條的數據//先不考慮功能,先能顯示出來//顯示上一頁var preLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a></li>');//通過類選擇器,添加進去$(".pager").append(preLi);//遍歷顯示頁碼for (var i = 1; i <= totalPage; i++) { //創建li標籤var li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通過類選擇器,添加到ul中$(".pager").append(li);}//顯示下一頁var nextLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a></li>');//通過類選擇器,添加進去$(".pager").append(nextLi);效果如下圖所示:
當前頁高亮顯示
由於bootstrap中,pager類不支持高亮顯示,因此把分頁的類換為pagination.
高亮的邏輯是,在遍歷的是否,判斷是否為當前頁(pageNo).
給li標籤添加class的active 屬性
//遍歷顯示頁碼for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //=========是當前頁,就高亮顯示li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通過類選擇器,添加到ul中$(".pagination").append(li); }else{ //========不是當前頁,不高亮顯示li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); //通過類選擇器,添加到ul中$(".pagination").append(li); }}效果如下
給頁碼添加點擊事件,切換數據.
當前頁不需要添加點擊事件
給頁數里面的a標籤添加onclick事件，綁定一個skipPage（）函數，skipPage（）函數里面所做的操作實際上就是我們獲取第1頁數據的向服務器發送Ajax的post請求的操作，所以把$(function(){})的代碼複製到skipPage（）函數中，然後在頁面加載完成時調用skipPage（）函數，傳入1就表示默認加載第1頁數據。此時,$(function(){})只會執行一次.而skipPage()成了遞歸函數,自己調用自己.但一次點擊事件,只會調用一次skipPage方法,與java中的遞歸不太一樣.
執行完此段代碼後,點擊不同的代碼,發現表格的內容以及分頁條會不斷疊加
如下圖所示:
每次加載數據時,清空數據. 清空分頁條
添加了清空分頁條的代碼後,發現,分頁條沒有疊加了,但是表格還在疊加
清空表格
$("#tab").empty();給表格執行清空代碼後發現如下現象:
表格的第一行標題沒有了,所以需要用選擇器,把第一行排除在外.
$("#tab tr:not(:first)")的含義是
先根據id選擇器,選擇表格
再由層級選擇器,選擇tr行
再由基本選擇器not中嵌套基本選擇器first,代表不是第一行
整體的意思是,選擇了表格了不是第一行的元素,調用empty()方法,刪除匹配的元素集合中所有的子節點。
測試後,能夠不刪除第一行數據
上一頁判斷是否可用,以及切換頁碼功能
如果當前頁是第一頁,上一頁功能就不可用.
如果當前頁不是第一頁,就添加點擊事件,切換到上一頁,把頁碼減一.
//顯示上一頁,判斷是否可用var preLi;if(pageNo===1){ //如果當前頁是第一頁,上一頁功能就不可用preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a></li>');}else{ preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo-1)+')">上一頁</a></li>');}//通過類選擇器,添加進去$(".pagination").append(preLi);下一頁判斷是否可用,以及切換頁碼功能
如果當前頁是最後一頁,上一頁功能就不可用.
如果當前頁不是最後一頁,就添加點擊事件,切換到下一頁,把頁碼加一.
//顯示下一頁,判斷是否可用var nextLi;if(pageNo===totalPage){ //如果當前頁是最後一頁,上一頁功能就不可用. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a></li>');}else { //如果當前頁不是最後一頁,就添加點擊事件,切換到上一頁,把頁碼減一. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo+1)+')">下一頁</a></li>');}//通過類選擇器,添加進去$(".pagination").append(nextLi);至此,前端頁面的代碼全部完成,功能全部實現
前端頁面的全部代碼如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品展示列表</title> <!--引入bootstrap相關文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> var url ="/ajax_product/product"; var pageNo=1;//當前頁面設置為1 var pageSize=5;//每頁顯示6條商品信息var totalPage;//一共有多少頁數據var products;//商品的數據信息//頁面加載時,向服務器發送請求,接收全部的商品數據$(function () { skipPage(1); }); function skipPage(page) { //===========分頁時的post請求=================================== pageNo=page; //=====向服務器發送post請求$.post( url,//給服務器傳送數據的地址{"pageNo": pageNo, "pageSize": pageSize},//給瀏覽器傳遞當前頁面數和每頁顯示的條數function (data) { //解析服務器端傳過來的全部pagebean數據,格式為json類型var pagebean = eval(data); //同步數據pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //顯示表格中的數據=============================================== //$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //遍歷每一行的數據var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 並添加到表格中,添加數據到表格中$("#tab").append(protd); } //顯示分頁條的數據======================================================== //清空分頁條$(".pagination").empty(); //先不考慮功能,先能顯示出來//顯示上一頁,判斷是否可用var preLi; if(pageNo===1){ //如果當前頁是第一頁,上一頁功能就不可用. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a> </li>'); }else{ //如果當前頁不是第一頁,就添加點擊事件,切換到上一頁,把頁碼減一. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')">上一頁</a></li>'); } //通過類選擇器,添加進去$(".pagination").append(preLi); //遍歷顯示頁碼for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //=========是當前頁,就高亮顯示li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>'); //通過類選擇器,添加到ul中$(".pagination").append(li); }else{ //========不是當前頁,不高亮顯示.添加點擊事件,參數傳遞為當前頁碼li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>'); //通過類選擇器,添加到ul中$(".pagination").append(li); } } //顯示下一頁,判斷是否可用var nextLi; if(pageNo===totalPage){ //如果當前頁是最後一頁,上一頁功能就不可用. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a> </li>'); }else { //如果當前頁不是最後一頁,就添加點擊事件,切換到上一頁,把頁碼減一. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')">下一頁</a></li>'); } //通過類選擇器,添加進去$(".pagination").append(nextLi); },"json") }</script><body><h3 align="center">促銷商品展示</h3><div> <!--商品的表格佔一行--> <div> <div> <!--table-hover表示當鼠標移入這一行表格的時候,顏色變化table-bordered表示給表格加邊框--> <table id="tab"> <tr> <th>編號</th> <th>商品名稱</th> <th>商品數量</th> <th>商品單價</th> </tr> </table> </div> </div> <div> <div > <nav> <ul> <!--此處代碼由js動態生成--> </ul> </nav> </div> </div></div></body></html>總結
此分頁功能,用到了JavaEE的三層架構的思想.每一層各司其職,做各自的負責的事情.前端部分為難點.需要處理的細節很多.前端涉及到了ajax和jquery.jQuery的一些語法與選擇器的相關的東西要非常熟練.還用到了bootrap響應式開發,讓前端頁面的佈局更加方便.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。