页面下拉加载数据

来源：互联网发布：网络推广服务协议编辑：程序博客网时间：2024/06/04 19:06

-----------页面代码----------------

<span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->  </head>  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="js/jquery.utils.js"></script>    <script type="text/javascript">      $(document).ready(function(){          var range = 50;            //距下边界长度/单位px          var elemt = 500;           //插入元素高度/单位px          var maxnum = ${maxNum};    //设置加载最多次数          var num = 1;          var totalheight = 0;           var tb = $("#tb");                     //主体元素          $(window).scroll(function(){              var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)                            //滚动条到顶部的垂直高度: $(document).scrollTop())              //页面的文档高度 ：$(document).height())             //浏览器的高度：$(window).height())                           totalheight = parseFloat($(window).height()) + parseFloat(srollPos);              if(($(document).height()-range) <= totalheight  && num < maxnum) { num++;//ajax加载            //$.showAjaxAction({img:"img/ajaxLoader.gif"});//页面load图片转动$.post("AutoLoadServlet","page="+num,function(data){//加载后台数据if(data!=null){ tb.append(data);                 }});//如果想直接体验效果，去掉ajax部分，修改maxnun为随意数字,打开下面代码//for(var i=1;i<=20;i++){// tb.append("<tr><td><br>测试下拉自动加载。。。。。"+num+"<br></td></tr>");  //}            }             if(num==maxnum){            $("#load").text("没有更多的数据了");            }         });      });      </script>    <body>    <div id="content" style="height:960px">          <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>          <table align="center" id="tb"><tr><td colspan="2"><br>测试下拉自动加载。。。。。<br><td></tr>${trs}</table>  <div id="load" style='border:1px solid tomato;margin-top:10px;color:red;height:20px;width:250px;align:center'><font color="red">下拉自动加载数据。。。</font></div><br>  </body></html></span>

---------------后台代码-------------

package servlet;import java.io.IOException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import DB.DBHelper;import DB.User;public class AutoLoadServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("AutoLoadServlet....");response.setCharacterEncoding("utf-8");response.setContentType("text/html");//当前页int page=Integer.parseInt(request.getParameter("page")==null?"1":request.getParameter("page"));DBHelper db=new DBHelper();List<User> list=db.getAllUsers(page);//分页查询StringBuffer trs=new StringBuffer();for(User user:list){trs.append("<tr><td>"+user.getId()+"</td><td>"+user.getName()+"</td></tr>");}int maxNum=(int)Math.ceil(db.getCount()/20.0);//总页数request.setAttribute("maxNum", maxNum);request.setAttribute("trs",trs.toString());response.getWriter().write(trs.toString());if(page==1){request.getRequestDispatcher("auto_load.jsp").forward(request, response);}}}

----------------------第一次访问Servlet

0 0