老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司,新征程啟航

為企業提供網站建設、域名注冊、服務器等服務

怎么在IDEA中使用ajax實現一個分頁查詢功能

本篇文章為大家展示了怎么在IDEA中使用ajax實現一個分頁查詢功能,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

十多年的廣安網站建設經驗,針對設計、前端、開發、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。全網營銷推廣的優勢是能夠根據用戶設備顯示端的尺寸不同,自動調整廣安建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優雅布局與設計,從而大程度地提升瀏覽體驗。創新互聯公司從事“廣安網站設計”,“廣安網站推廣”以來,每個客戶項目都認真落實執行。

開發環境:

  1. 系統 window10

  2. IDE:IntelliJ IDEA2017.3.2

  3. 數據庫:MySQL5.5

  4. 數據庫連接工具: Navicat

  5. 瀏覽器:chrome 版本號 65.0.3325.181

第一步:代碼實現之前期準備

在IDEA中開發前期配置的工作,網上的帖子很多,我 在這里就不再贅述.主要說三點

服務器的配置中,紅色框框的兩項要選擇update classes and resource ,選擇了之后可以實現熱部署.

怎么在IDEA中使用ajax實現一個分頁查詢功能 

要在此處填寫項目的名稱.作為項目的根路徑

怎么在IDEA中使用ajax實現一個分頁查詢功能 

導入jar包的方式如圖所示,在dependencie中點擊加號,選中自己創建好的lib文件夾

怎么在IDEA中使用ajax實現一個分頁查詢功能 

導入相關的jar包: c3p0的jar包、DbUtils工具類jar包、fastJson的jar包、mysql驅動jar包

怎么在IDEA中使用ajax實現一個分頁查詢功能 

在數據庫test03的product表中寫入如下的數據

怎么在IDEA中使用ajax實現一個分頁查詢功能 

在IDEA中為工程分包,以及導入c3p0連接池的配置

怎么在IDEA中使用ajax實現一個分頁查詢功能

注意,c3p0配置文件,要修改成自己的數據庫名稱,以及數據庫密碼

怎么在IDEA中使用ajax實現一個分頁查詢功能

在domain包中,創建Product實體類,根據數據庫中product表的字段,在Product類中,書寫對應的屬性.生成get set方法.

怎么在IDEA中使用ajax實現一個分頁查詢功能 

創建獲取連接池對象的工具類

怎么在IDEA中使用ajax實現一個分頁查詢功能 

第二步:無分頁查詢所有的商品信息

實現思路:

jsp/html----->servlet(web層處理請求與響應的數據) -----------> service(service層處理邏輯)----------->dao(dao層處理數據庫操作)

創建產品頁面,向服務器發送請求(獲取所有產品信息)

前端使用了bootstrap響應式開發,可以讓頁面更加美觀,開發更加便捷

頁面信息的代碼如下:




  
  商品展示列表
  
  
  
  


  //頁面加載時,向服務器發送請求,接收全部的商品數據
  $(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 =$(""+products[i].id+""+products[i].name+""+products[i].count+""+products[i].price+"");
        // 并添加到表格中,添加數據到表格中
        $("#tab").append(protd);
      }
    },"json")
  })



促銷商品展示

  
  
    
      
      
        
          編號
          商品名稱
          商品數量
          商品單價
        
      
    
  

創建一個servlet來接收請求,獲取所有的產品信息

在IDEA中,創建servlet如下圖所示

怎么在IDEA中使用ajax實現一個分頁查詢功能

在這里不勾選自動生成注解

怎么在IDEA中使用ajax實現一個分頁查詢功能

點擊ok之后,IDEA會自動跳轉到web.xml文件中,自動寫好了Servlet的全路徑名,只需寫url-pattern即可

注意url-pattern需要寫得與ajax請求中的Servlet一致.

怎么在IDEA中使用ajax實現一個分頁查詢功能

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 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 findAllProuct() throws SQLException {
    ProductDao dao = new ProductDao();
    //調用dao層查詢所有的商品
    List 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 findAllProduct() throws SQLException {
    //利用dbutils,創建QueryRunner核心對象
    QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
    //書寫sql語句,查詢所有的商品
    String sql = "select * from product";
    //把商品到的商品,轉為list集合,泛型為product
    List 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 =$(""+products[i].id+""+products[i].name+""+products[i].count+""+products[i].price+"");
        // 并添加到表格中,添加數據到表格中
        $("#tab").append(protd);
      }
    },"json")

通過谷歌瀏覽器自帶的抓包工具,可以看到servlet響應的數據

怎么在IDEA中使用ajax實現一個分頁查詢功能

把響應的數據全部復制下來,就是如下的數據.一個數組中嵌套了產品的對象.

對象中都是以鍵值對的形式存在的.

例如第一個數據中,鍵為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}
]

不分頁的情況下,展示的效果如下:

一個頁面中,把所有的數據都展示出來了,如果數據非常多,例如上百度搜索一個關鍵詞,結果可能有上萬上億條,一次性從數據庫中,拿這么多的結果給瀏覽器,是很長的時間的,用戶體驗極差,因此需要分頁技術.采用物理分頁,

一次只從數據庫中查詢當前頁面需要的信息.

怎么在IDEA中使用ajax實現一個分頁查詢功能 

第三步:傳遞當前頁面數和每頁顯示的數量給服務器

html頁面中需要增加當前頁面數和每頁顯示的數量這兩個變量,傳遞給服務器

更改代碼的如下圖所示:

怎么在IDEA中使用ajax實現一個分頁查詢功能

在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 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 findProduct(int pageNo, int pageSize) throws SQLException {
    ProductDao dao = new ProductDao();
    List product = dao.findProduct(pageNo, pageSize);
    return product;
  }

dao層新增的從數據庫查找當前頁面的方法

public List findProduct(int pageNo, int pageSize) throws SQLException {
    QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
    String sql ="select * from product limit ?,?";
    //limit第一個參數:從數據庫中的哪里開始查,索引是從0開始的
    //第二個參數:每次查多少個
    //第一個參數的規律是:當前頁數減一,乘以每頁查詢的個數
    List productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize);
    return productList;
  }

瀏覽器端顯示如下圖所示:每次只會顯示pageSize(當前的值為6)個數的商品信息.

但是還不能動態的通過點擊頁面按鈕來實現翻頁.

怎么在IDEA中使用ajax實現一個分頁查詢功能

那么就要考慮頁面如何顯示分頁條以及數據該如何封裝?

我們知道頁面的分頁條 顯示的頁數是動態變化的 ,總頁數=數據的總條數/每頁顯示的數據,要向上取整。也就是說,我們的頁面除了需要List數據之外,還需要數據的總條數、總頁數、當前頁、每頁顯示數量。另外當前頁pageNo也是動態變化的,在頁面上點擊多少頁,pageNo就是幾。所以, 我們需要再創建一個javabean(PageBean.java)來封裝這些數據 ,在服務端得到這些數據之后轉成json數據發送給客戶端顯示。

第四步:將頁面的相關數據封裝為一個JavaBean

在domain包內創建一個類,名為PageBean,屬性如下:

private int pageNo;//當前頁數
private int pageSize;//每頁顯示的數量
private int totalCount;//一共有多少個商品信息數據
private int totalPage;//一共有多少頁數據
private List 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 allProuct = service.findAllProuct();

      把得到的數據,轉為json類型的數據
      String jsonString = JSONObject.toJSONString(allProuct);*/

      //根據當前頁和每頁顯示的數目,來從service層,獲取數據
      //List 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 findAllProuct() throws SQLException {
    ProductDao dao = new ProductDao();
    //調用dao層查詢所有的商品
    List allProduct = dao.findAllProduct();
    return allProduct;
  }

  //============service層查詢某個特定頁面的數據給web層=================================
  public List findProduct(int pageNo, int pageSize) throws SQLException {
    ProductDao dao = new ProductDao();
    List product = dao.findProduct(pageNo, pageSize);
    return product;
  }

  //============service層封裝pagebean數據===================================
  public PageBean findPageInfo(int pageNo, int pageSize) throws SQLException {
    ProductDao dao = new ProductDao();
    List 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 findAllProduct() throws SQLException {
    //利用dbutils,創建QueryRunner核心對象
    QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
    //書寫sql語句,查詢所有的商品
    String sql = "select * from product";
    //把商品到的商品,轉為list集合,泛型為product
    List products = qr.query(sql, new BeanListHandler<>(Product.class));
    return products;
  }
//=======================查詢當前頁的產品信息=====================
  public List findProduct(int pageNo, int pageSize) throws SQLException {
    QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
    String sql ="select * from product limit ?,?";
    //limit第一個參數:從數據庫中的哪里開始查,索引是從0開始的
    //第二個參數:每次查多少個
    //第一個參數的規律是:當前頁數減一,乘以每頁查詢的個數
    List 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代碼注釋掉,因為需要動態展示.

怎么在IDEA中使用ajax實現一個分頁查詢功能

先聲明需要接收的參數變量

var url ="/ajax_product/product";
var pageNo=1;//當前頁面設置為1
var 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 =$(""+products[i].id+""+products[i].name+"              "+products[i].count+""+products[i].price+"            ");
      // 并添加到表格中,添加數據到表格中
      $("#tab").append(protd);
    }
  },"json")

這段代碼寫完后,可開啟服務器,測試能否獲取數據到表格中.經測試成功顯示數據.

怎么在IDEA中使用ajax實現一個分頁查詢功能 

顯示分頁條的數據

先顯示上一頁與下一頁的數據

//顯示分頁條的數據
//先不考慮功能,先能顯示出來
//顯示上一頁
var preLi=$('上一頁');
//通過類選擇器,添加進去
$(".pager").append(preLi);

//顯示下一頁
var nextLi=$('下一頁');
//通過類選擇器,添加進去
$(".pager").append(nextLi);

進測試效果如下:

怎么在IDEA中使用ajax實現一個分頁查詢功能 

顯示頁碼數據:

//顯示分頁條的數據
//先不考慮功能,先能顯示出來
//顯示上一頁
var preLi=$('上一頁');
//通過類選擇器,添加進去
$(".pager").append(preLi);

//遍歷顯示頁碼
for (var i = 1; i <= totalPage; i++) {
  //創建li標簽
  var li=$('
  • '+i+'
  • ');   //通過類選擇器,添加到ul中   $(".pager").append(li); } //顯示下一頁 var nextLi=$('下一頁'); //通過類選擇器,添加進去 $(".pager").append(nextLi);

    效果如下圖所示:

    怎么在IDEA中使用ajax實現一個分頁查詢功能 

    當前頁高亮顯示

    由于bootstrap中,pager類不支持高亮顯示,因此把分頁的類換為pagination.

    高亮的邏輯是,在遍歷的是否,判斷是否為當前頁(pageNo).

    給li標簽添加class的active 屬性

    //遍歷顯示頁碼
    for (var i = 1; i <= totalPage; i++) {
      var li;
      if(i===pageNo){
        //=========是當前頁,就高亮顯示
        li=$(''+i+'');
        //通過類選擇器,添加到ul中
        $(".pagination").append(li);
      }else{
        //========不是當前頁,不高亮顯示
        li=$('
  • '+i+'
  • ');     //通過類選擇器,添加到ul中     $(".pagination").append(li);   } }

    效果如下

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    給頁碼添加點擊事件,切換數據.

    當前頁不需要添加點擊事件

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    給頁數里面的a標簽添加onclick事件,綁定一個skipPage()函數,skipPage()函數里面所做的操作實際上就是我們獲取第1頁數據的向服務器發送Ajax的post請求的操作,所以 把$(function(){})的代碼復制到skipPage()函數中,然后在頁面加載完成時調用skipPage()函數,傳入1就表示默認加載第1頁數據。此時,$(function(){})只會執行一次.而skipPage()成了遞歸函數,自己調用自己.但一次點擊事件,只會調用一次skipPage方法,與java中的遞歸不太一樣.

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    執行完此段代碼后,點擊不同的代碼,發現表格的內容以及分頁條會不斷疊加

    如下圖所示:

    怎么在IDEA中使用ajax實現一個分頁查詢功能 

    每次加載數據時,清空數據. 清空分頁條

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    添加了清空分頁條的代碼后,發現,分頁條沒有疊加了,但是表格還在疊加

    怎么在IDEA中使用ajax實現一個分頁查詢功能 

    清空表格

    $("#tab").empty(); 給表格執行清空代碼后發現如下現象:

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    表格的第一行標題沒有了,所以需要用選擇器,把第一行排除在外.

    怎么在IDEA中使用ajax實現一個分頁查詢功能

    $("#tab tr:not(:first)")的含義是

    先根據id選擇器,選擇表格

    再由層級選擇器,選擇tr行

    再由基本選擇器not中嵌套基本選擇器first,代表不是第一行

    整體的意思是,選擇了表格了不是第一行的元素,調用empty()方法,刪除匹配的元素集合中所有的子節點。

    測試后,能夠不刪除第一行數據

    怎么在IDEA中使用ajax實現一個分頁查詢功能 

    上一頁判斷是否可用,以及切換頁碼功能

    如果當前頁是第一頁,上一頁功能就不可用.

    如果當前頁不是第一頁,就添加點擊事件,切換到上一頁,把頁碼減一.

    //顯示上一頁,判斷是否可用
    var preLi;
    if(pageNo===1){
      //如果當前頁是第一頁,上一頁功能就不可用
      preLi=$('上一頁');
    }else{
      preLi=$('
  • 上一頁
  • '); } //通過類選擇器,添加進去 $(".pagination").append(preLi);

    下一頁判斷是否可用,以及切換頁碼功能

    如果當前頁是最后一頁,上一頁功能就不可用.

     如果當前頁不是最后一頁,就添加點擊事件,切換到下一頁,把頁碼加一.

    //顯示下一頁,判斷是否可用
    var nextLi;
    if(pageNo===totalPage){
      //如果當前頁是最后一頁,上一頁功能就不可用.
      nextLi=$('下一頁');
    }else {
      //如果當前頁不是最后一頁,就添加點擊事件,切換到上一頁,把頁碼減一.
      nextLi=$('
  • 下一頁
  • '); } //通過類選擇器,添加進去 $(".pagination").append(nextLi);

    至此,前端頁面的代碼全部完成,功能全部實現

    前端頁面的全部代碼如下

    
    
    
      
      商品展示列表
      
      
      
      
    
    
      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 =$(""+products[i].id+""+products[i].name+"          "+products[i].count+""+products[i].price+"");
              // 并添加到表格中,添加數據到表格中
              $("#tab").append(protd);
            }
    
            //顯示分頁條的數據========================================================
    
            //清空分頁條
            $(".pagination").empty();
    
            //先不考慮功能,先能顯示出來
            //顯示上一頁,判斷是否可用
            var preLi;
            if(pageNo===1){
              //如果當前頁是第一頁,上一頁功能就不可用.
              preLi=$('上一頁             ');
            }else{
              //如果當前頁不是第一頁,就添加點擊事件,切換到上一頁,把頁碼減一.
              preLi=$('
  • 上一頁
  • ');         }         //通過類選擇器,添加進去         $(".pagination").append(preLi);         //遍歷顯示頁碼         for (var i = 1; i <= totalPage; i++) {           var li;           if(i===pageNo){             //=========是當前頁,就高亮顯示             li=$(''+i+'               ');             //通過類選擇器,添加到ul中             $(".pagination").append(li);           }else{             //========不是當前頁,不高亮顯示.添加點擊事件,參數傳遞為當前頁碼             li=$('
  • '+i+'
  • ');             //通過類選擇器,添加到ul中             $(".pagination").append(li);           }         }         //顯示下一頁,判斷是否可用         var nextLi;         if(pageNo===totalPage){            //如果當前頁是最后一頁,上一頁功能就不可用.           nextLi=$('下一頁         ');         }else {           //如果當前頁不是最后一頁,就添加點擊事件,切換到上一頁,把頁碼減一.           nextLi=$('
  • 下一頁
  • ');         }         //通過類選擇器,添加進去         $(".pagination").append(nextLi);       },"json")   } 促銷商品展示                                             編號           商品名稱           商品數量           商品單價                                               

    上述內容就是怎么在IDEA中使用ajax實現一個分頁查詢功能,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注創新互聯行業資訊頻道。


    當前標題:怎么在IDEA中使用ajax實現一個分頁查詢功能
    網頁鏈接:http://www.xueling.net.cn/article/iggosh.html

    其他資訊

    在線咨詢
    服務熱線
    服務熱線:028-86922220
    TOP
    主站蜘蛛池模板: 肉丝一区二区 | 久99久精品视频免费观看 | a级毛片免费高清视频 | 蜜桃视频在线播放 | 国产日韩精品一区二区在线观看播放 | 天海翼三点刺激高潮不停 | AAAA级少妇高潮大片在线观看 | 中文无码精品a∨在线 | 国产亚洲欧美日韩俺去了 | 色视频在线免费看 | 人人妻一区二区三区 | 女人高潮av国产伦理剧 | 国产九九热 | 5060一级毛片 | 最近日本中文字幕免费完整 | 亚洲av毛片成人精品 | 婷婷777 | 女人16一毛片 | 国产福利免费看 | 亚洲香蕉伊综合在人在线观看 | 4d玉蒲团奶水都喷出来了免费 | 97超碰人人爱香蕉精品 | 人与动人物XXXX毛片老司机 | 午夜在线免费视频 | 国模丰满少妇私拍 | 久久伊甸园 | 波多野结衣在线视频免费观看 | 向往的生活第2季免费观看 被按摩师玩弄到潮喷在线播放 | 亚洲午夜久久久久妓女影院 | 国产精品国产三级国产av′ | 91九色磁力 | 国精产品一区二区三区四区糖心 | 久久久久夜夜夜 | 最近中文AV字幕在线中文 | 国产V精品V欧美V日韩V | 国产公妇仑乱在线观看 | 婷婷色一区 | 古代级a毛片免费观看 | 免费久草在线 | 国产视热频国只有精品 | 99久久精品一区二区毛片吞精 |