页面实现Lazy Loading效果,类似于微博

最新推荐文章于 2023-02-03 09:55:09 发布

iteye_11234

最新推荐文章于 2023-02-03 09:55:09 发布

阅读量238

点赞数

分类专栏： JQuery 文章标签： java 数据库 javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11234/article/details/82448129

版权

JQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

用到Jquery插件：[url]http://imakewebthings.com/jquery-waypoints/[/url]

示例：

<%@ 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>lazyload</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Infinite Scrolling with jQuery Waypoints</title>
	<meta name="description" content="An example of how to build an infinite scrolling page on top of the jQuery Waypoints plugin">
	<meta name="viewport" content="width=480">
	<script src="jslib//modernizr.custom.js"></script>
</head>
<body>

<div id="wrapper">
 	<center>
		<table id="container" style="border:1px solid #96C2F1; background-color: #EFF7FF; width: 300px; height: 100px; margin: 0px auto;">
			<tr>
				<td>id</td><td>name</td>
			</tr>
			<tr>
				<td>2</td><td>Lucy</td>
			</tr>
			<tr>
				<td>3</td><td>James</td>
			</tr>
			<tr>
				<td>4</td><td>Gaga</td>
			</tr>
		</table>
	</center>

	<div id="footer">
	</div>

</div>

<script src="jslib/jquery-1.7.1.js"></script>
<script src="jslib/waypoints.js"></script>

<script type="text/javascript"><!--
$(document).ready(function() {
	var $loading = $("<div class='loading'><p>Loading more items…</p></div>"),
	$footer = $('#footer'),
	opts = {
		offset: '100%'
	};

	$footer.waypoint(function(event, direction) {
		$footer.waypoint('remove');
		$('body').append($loading);
		//alert($('#container tr:last td:first').text());
		var id=$('#container tr:last td:first').text();

		$.post('lazyload', {id: id}, function(data) {
			if(data!=-1){
				//alert("call back:"+data);
				var jsons = eval(data);
				//alert(jsons);
				for(i in jsons){
					$('#container').append("<tr><td>"+jsons[i].id+"</td><td>"+jsons[i].name+"</td></tr>");
				}
				//$('#container').append($data.find('.article'));
				//$('#container').append($data);
				$loading.detach();
				//$('.more').replaceWith($data.find('.more'));
				$footer.waypoint(opts);
			}else{
				//alert('nodata');
				$loading.detach();
			}
		});
	}, opts);
});
--></script>

</body>
</html>

处理ajax请求的servlet



import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.hp.bean.User;

public class LazyLoadAction extends HttpServlet {

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();

		int id=Integer.valueOf(request.getParameter("id"));
		System.out.println("-----------id:"+id);

		List<User> list = getUserList(id, id + 30);

		if(list.size()>0){
			StringBuilder sb=new StringBuilder();
			sb.append("[");
			for(int i=0; i<list.size(); i++){
				User u=list.get(i);

				sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "},");

				if(i==list.size()-1)
					sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "}]");
			}
			System.out.println(sb.toString());
			out.print(sb);
		}else{
			out.print("-1");
		}

		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}


	public static List<User> getUserList(int start,int end){
		String url="jdbc:mysql://localhost:3306/test";
		String jdbcdriver="com.mysql.jdbc.Driver";
		Connection con=null;
		List<User> list=new ArrayList<User>();
		try {
			Class.forName(jdbcdriver);
			con=DriverManager.getConnection(url, "root", "root");
			String sql="select * from user where id>? and id<?";
			PreparedStatement pst=con.prepareStatement(sql);
			pst.setInt(1, start);
			pst.setInt(2, end);
			ResultSet rs=pst.executeQuery();

			while(rs.next()){
				User user=new User();
				user.setId(rs.getInt(1));
				user.setName(rs.getString(2));

				list.add(user);
			}

			rs.close();
			con.close();
		}catch(Exception e){
			e.printStackTrace();
		}
		return list;
	}

}

public class User {

	private Integer id;
	private String name;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}


}