JavaWeb使用Ajax实现条件与分页查询

朱雀 2023-01-09 12:40 221阅读 0赞

在前篇博文中，博主完成了ajax联动选择的小Demo，今天，给大家分享的是使用ajax来实现条件与分页查询，先看效果图：  
![在这里插入图片描述][20210121114131560.gif_pic_center]  
对比一个我之前写的分页条件查询，使用的只是Servlet返还request来实现检索，其页面明显需要一个刷新操作，且由于页码与条件需要处理才能同时作为参数传入，很不方便。因此，这个使用ajax的条件分页查询便较为友好了。而且这个页码写法可以移植到所有的管理页码，下面，介绍这个小Demo的开发步骤：  
项目目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70_pic_center]

**1.创建相应的工具类，像数据库连接，分页的工具类：**  
DBUtil.java 完成返还分页查询结果：

public Page getQueryPage(Class<?> type, String sql,Object[] params,Page page){ 
    		int totalPages = 0;	//页数
    		Long rows = 0l;//数据记录数
    		
    		//分页工具类
    		List<Class<?>> list = null;
    		Map countMap = null;
    		try { 
    			list = this.getQueryList(type,sql
    					+ " limit " 
    					+ (page.getCurPage()-1)*page.getPageNumber() 
    					+" , "+page.getPageNumber(),params);			
    			countMap = this.getObject(" "
    					+ "select count(*) c from ("+ sql +") as t ", params);
    			rows =  (Long)countMap.get("c");
    			//求余数
    			if(rows % page.getPageNumber() ==0){ 
    				totalPages = rows.intValue() / page.getPageNumber();
    			}else{ 
    				totalPages = rows.intValue() / page.getPageNumber() + 1;
    			}
    			
    			page.setRows(rows.intValue());
    			page.setList(list);
    			page.setTotalPage(totalPages);
    		}catch(Exception e){ 
    			e.printStackTrace();
    		}
    		return page;
    	}

Page类的定义：

public class Page { 
    
    	//每页显示的条数
    	private int pageNumber=5;
    	//当前页
    	private int curPage;
    	//总条数
    	private int rows;
    	//总页数
    	private int totalPage;
    	//要现实的list
    	private List list=new ArrayList();
    	public int getPageNumber() { 
    		return pageNumber;
    	}
    	public void setPageNumber(int pageNumber) { 
    		this.pageNumber = pageNumber;
    	}
    	public int getCurPage() { 
    		return curPage;
    	}
    	public void setCurPage(int curPage) { 
    		this.curPage = curPage;
    	}
    	public int getRows() { 
    		return rows;
    	}
    	public void setRows(int rows) { 
    		this.rows = rows;
    	}
    	public int getTotalPage() { 
    		return totalPage;
    	}
    	public void setTotalPage(int totalPage) { 
    		this.totalPage = totalPage;
    	}
    	public List getList() { 
    		return list;
    	}
    	public void setList(List list) { 
    		this.list = list;
    	}
    	@Override
    	public String toString() { 
    		return "Page [pageNumber=" + pageNumber + ", curPage=" + curPage + ", rows=" + rows + ", totalPage=" + totalPage
    				+ ", list=" + list + "]";
    	}
    	
    }

JSON转换：我们在数据查询时，使用的是JSON的数据格式，因此需要进行转换。  
在这里我们在封装JSON数据时为避免出错，所以并不是手动封装，而是使用了相关的jar包来实现，我使用的是阿里云的共享jar包:  
fastjson-1.2.62.jar  
[项目所需的jar包][jar]

public class JsonUtil { 
    	/* * 把对象转换为JSON的工具方法 */
    	public static String ObjectRoJsonString(Object obj){ 
    		return JSON.toJSONString(obj, true);
    	}
    }

接下来，便是MVC设计模式中的开发步骤了：  
**2.三层架构开发**  
BookServlet.java

private void findBooks(HttpServletRequest request,
    			HttpServletResponse response) throws IOException { 
    		// TODO Auto-generated method stub
    		PrintWriter out=response.getWriter();
    		String curPage=request.getParameter("curPage");
    		String bookname=request.getParameter("bookname");
    		int curpagestr=1;
    		if("".equals(curPage)||curPage.equals(null)||curPage==null){ 
    			curpagestr=1;
    		}else{ 
    			curpagestr=Integer.parseInt(curPage);
    		}
    		//把当前页码赋值给Page的curpage属性
    		Page page=new Page();
    		page.setCurPage(curpagestr);
    		//调用Service分页查询方法
    		page=bookservice.getBookAll(page,bookname);
    		String jsonString=JsonUtil.ObjectRoJsonString(page);
    		System.out.println(jsonString);
    		out.write(jsonString);
    		out.flush();
    		out.close();
    	}

BookServiceImpl.java

public class BookServiceImpl implements BookService{ 
    	BookDao bookdao=new BookDaoImpl();
    
    	@Override
    	public Page getBookAll(Page page,String bookname) { 
    		// TODO Auto-generated method stub
    		return bookdao.getBookAll(page,bookname);
    	}
    	
    }

BookDaoImpl.java

public class BookDaoImpl implements BookDao{ 
    	DBUtil dbutil=new DBUtil();
    	public Page getBookAll(Page page,String bookname) { 
    		// TODO Auto-generated method stub
    		String sql="select books.id id,books.name name,info,types.name typename,bookDate from books inner join types on types.id=books.typeid where books.name like '%"+bookname+"%'";
    		Page page1=null;
    		
    		page1 = dbutil.getQueryPage(Book.class, sql, null, page);
    		
    		return page1;
    	}
    
    }

**3.jsp页面编辑：**  
这是html的表格设计

由于是ajax查询方式，需要在页面上进行刷新追加，因此需要实现ajax请求的函数：

在上一个函数中，在查询数据成功后需要进行数据信息追加到页面中并且将页码加入，分别调用了 fillData() 与 fillFooter()两个函数

填充表格

**//定义填充表格数据的函数**
    				function fillData(data){ 
    					//获取json中list属性对应值[json数组]
    					$dataTable.find("tr:gt(0)").remove();//清除
    					var books=data.list;
    					for(var i=0;i<books.length;i++){ 
    						var book=books[i];
    						var id=book.id;
    						var name=book.name;
    						var typen=book.typename;
    						var info=book.info;
    						var booktime=book.bookDate;
    						
    						//构建行的Juery对象
    						var $tr=$("<tr><td>"+id+"</td><td>"+name+"</td><td>"+typen+
    								"</td><td><img src='${basePath}/admin/img/"+id%5+".jpg' width=40 height=50></td><td>"+booktime+"</td></tr>");
    						//把构建的行追加到表格中
    						$dataTable.append($tr);
    					}
    				}

填充分页

function fillFooter(data){ 
    					var $tr="<tr><td colspan=5>总共"+data.totalPage+"页 共"+data.rows+"条数据 当前第"+data.curPage+"页"
    					+"<a href='javascript:_first();'> 首页 </a>"
    					+"<a href='javascript:_pre();'> 上一页 </a>"
    					+"<a href='javascript:_next("+data.totalPage+");'> 下一页 </a>"
    					+"<a href='javascript:_last("+data.totalPage+");'> 尾页 </a>"
    					+"</td></tr>";
    					$dataTable.append($tr);
    				}

然后对页码进行操作

最终只要调用queryList()函数就可以了

码字不易，给个赞呗

[20210121114131560.gif_pic_center]: /images/20221119/6ef02b9e253941b2b78109208ba5bca2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/fae47ef451ca4ad59fd58b0c148ea5f3.png
[jar]: https://download.csdn.net/download/pengxiang1998/14903065