此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下
https://www.jianshu.com/p/1fd6b39e98ac
IntelliJ IDEA中ajax开发实现分页查询
文章目录
开发环境:
- IntelliJ IDEA中ajax开发实现分页查询
- 第一步:代码实现之前期准备
- 第二步:无分页查询所有的商品信息
- 第三步:传递当前页面数和每页显示的数量给服务器
- 第四步:将页面的相关数据封装为一个JavaBean
- 第五步:处理前端页面
- 写好了ajax的post请求之后,抓包测试浏览器是否接收到数据
- 显示表格中的数据
- 显示分页条的数据
- 显示页码数据:
- 当前页高亮显示
- 给页码添加点击事件,切换数据.
- 当前页不需要添加点击事件
- 每次加载数据时,清空数据.
- 清空分页条
- 清空表格
- 上一页判断是否可用,以及切换页码功能
- 下一页判断是否可用,以及切换页码功能
- 总结
- 系统 window10
- IDE:IntelliJ IDEA2017.3.2
- 数据库:MySQL5.5
- 数据库连接工具: Navicat
- 浏览器:chrome 版本号 65.0.3325.181
在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响应式开发,可以让页面更加美观,开发更加便捷
页面信息的代码如下:
商品展示列表 //页面加载时,向服务器发送请求,接收全部的商品数据 $(function () { //===================未分页,展示所有数据=============================== var url ="/ajax_product/product"; //=====向服务器发送post请求 $.post(url,function (data) { //解析服务器端传过来的全部数据 //============================向表格中展示商品信息 var products = eval(data); //遍历数据 for (var i = 0; i 促销商品展示 编号 商品名称 商品数量 商品单价 -
创建一个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 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 上一页');
}
//通过类选择器,添加进去
$(".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 上一页');
}
//通过类选择器,添加进去
$(".pagination").append(preLi);
//遍历显示页码
for (var i = 1; i '+i+'');
//通过类选择器,添加到ul中
$(".pagination").append(li);
}
}
//显示下一页,判断是否可用
var nextLi;
if(pageNo===totalPage){
//如果当前页是最后一页,上一页功能就不可用.
nextLi=$('下一页 ');
}else {
//如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一.
nextLi=$('下一页 ');
}
//通过类选择器,添加进去
$(".pagination").append(nextLi);
},"json")
}
促销商品展示
编号
商品名称
商品数量
商品单价
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
