1.分页
分页条:【首页】【上一页】[1][2][3][4]【下一页】【尾页】
分页功能的实现:
物理分页:一次只查10条记录,点击下一页,再去查询后10条,使用sql语句进行控制的分页
缺点:经常需要和数据库交互
优点:数据量特别大,不会导致内存溢出
逻辑分页:一次性将所有数据全都查询出来,根据需要进行截取.List集合进行控制. subList();
缺点:数据量如果特别大,容易导致内存溢出.
优点:与数据库交互次数少.
不同的数据库对分页的语句也是不一样的
MYSQL进行分页: 使用limit关键字.
* select * from xxx limit a,b;
根据页数计算 limit后面的两个参数:
* currPage begin pageSize
1 0 10
2 10 10
3 20 10
* begin = (currPage - 1) * pageSize;
参数的传递:
* 前台--->后台:currPage
* 后台--->前台:currPage,totalPage(总页数),totalCount(总记录数),pageSize,List
使用JavaBean封装参数:
* 后台--->前台:传递一个JavaBean就可以.
实现:
在index.jsp中添加一个分页访问数据的链接
<a href="${ pageContext.request.contextPath }/ProductFindByPageServlet?currentPage=1">分页查询商品</a>
在web.servlet层创建ProductFindByPageServlet
public class ProductFindByPageServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * 分页的servlet */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //获取表单数据 int currentPage = Integer.parseInt(request.getParameter("currentPage")); //调用业务逻辑 ProductService ps = new ProductService(); PageBean pageBean = ps.findByPage(currentPage); //分发转向 request.setAttribute("pageBean", pageBean); request.getRequestDispatcher("/jsp/product_page.jsp").forward(request, response); } catch (Exception e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
把当前页传递到service层,在service层处理业务逻辑
因为在业务层需要把当前页,总页,总记录数等数据封装到一个pageBean中,所以首先先创建pageBean类
public class PageBean { //当前页 private int currentPage; //总记录数 private int totalCount; //每页显示数 private int pageSize; //总页数 private int totalPage; //每页显示的数据信息 private List<Product> list; public PageBean(int currentPage, int totalCount, int pageSize, int totalPage, List<Product> list) { super(); this.currentPage = currentPage; this.totalCount = totalCount; this.pageSize = pageSize; this.totalPage = totalPage; this.list = list; } public PageBean() { super(); } public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public List<Product> getList() { return list; } public void setList(List<Product> list) { this.list = list; } }
编写业务层
/** * 把当前页,总记录数,每页显示数,总页数,封装到pagebean,返回给servlet * @throws SQLException * */ public PageBean findByPage(int currentPage) throws SQLException { //创建pagebean对象 PageBean pb = new PageBean(); //设置当前页,封装到pagebean pb.setCurrentPage(currentPage); //设置每页显示数,并封装到pagebean int pageSize = 10; pb.setPageSize(pageSize); /** * 调用dao层获取到总记录数,封装到pagebean中 * */ int totalCount = pd.findCount(); pb.setTotalCount(totalCount); //得到总页数,封装到pagebean /*Double numCount = (double) (totalCount/pageSize); int totalPage = numCount.intValue();*/ double tc = totalCount; //向上取整 Double num = Math.ceil(tc/pageSize); int totalPage = num.intValue(); pb.setTotalPage(totalPage); //获取limit的第一个参数(从第几条开始) int begin = (currentPage - 1) * pageSize; /** * 调用dao层,获取每页显示的product数据,封装到list中在封装到pagebean中 * */ //传入limit需要的开始页和每页显示的记录数 List<Product> list = pd.findByPage(begin,pageSize); pb.setList(list); return pb; }
//返回总记录数
public int findCount() throws SQLException { String sql = "select count(*) from product"; Long l = (Long) qr.query(sql, new ScalarHandler()); return l.intValue(); }
//拿到分页的当前分页的数据 public List<Product> findByPage(int begin, int pageSize) throws SQLException { String sql = "select * from product limit ?,?"; Object [] params = {begin,pageSize}; List<Product> list = qr.query(sql, new BeanListHandler<Product>(Product.class), params); return list; }
2.AJAX异步验证注册
首先是不使用jq的方式用 异步完成验证注册
这是一个输入用户名界面的div
<div> 请输入用户名:<input type="text" name="username" id="username" class="clickevent" /> <span id="show"></span> </div>
为这个标签绑定一个失去焦点的事件
document.getElementById("username").onblur = function() { //获取异步对象 var xhr = createXMLHttp; //设置监听 xhr.onreadystatechange = function() { var username = document.getElementById("username").value; if(xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseText; if(data == 1) { document.getElementById("show").innerHTML = "<font color='green'>用户名可以使用</font>"; }else { document.getElementById("show").innerHTML = "<font color='red'>用户名已经被占用</font>"; } document.getElementById("show").innerHTML = "bbb"; } } xhr.open("POST","/AJAX/CheckServlet",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("username="+username); xhr.send("username="+username); }
//提供一个异步对象创建的方法
function createXMLHttp() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
编写CheckServlet
public class CheckServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * 异步校验用户名 */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username"); System.out.println("username="+username); try { UserService us = new UserService(); User user = us.checkUser(username); System.out.println(user); if(user == null) { //response.getWriter().println(1); response.getWriter().println("<font color='green'>用户名可以使用</font>"); }else { //response.getWriter().println(2); response.getWriter().println("<font color='red'>用户名已经被占用</font>"); } } catch (SQLException e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
业务层
public class UserService { UserDao ud = new UserDao(); public User checkUser(String username) throws SQLException { User user = ud.check(username); return user; } }
dao层
public class UserDao { QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource()); public User check(String username) throws SQLException { String sql = "select * from users where username = ?"; Object [] params = {username}; User user = qr.query(sql, new BeanHandler<User>(User.class), params); return user; } }
但是jq框架让异步验证更简便,所以更推荐使用异步
JQuery的AJAX
JQuery的AJAX部分方法:
* Jq的对象.load(路径,参数,回调函数);
* $.get(路径,参数,回调函数,数据类型);
* $.post(路径,参数,回调函数,数据类型);
* $.ajax();
* serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.
首先引入两个jq的文件
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.js"></script>
编写jquery.js
$(function () {
//给用户名文本框添加事件
$("#username").blur(function() {
//获取文本框中的值
var username = $(this).val();
//调用方法
$("#show").load("/AJAX/CheckServlet",{"username":username});
});
});