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

xudongcsharp

浏览: 480145 次
性别:
来自: 上海

最近访客更多访客>>

fbswz1111

chenmo80125

jelly25176

Cadelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

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

示例：

<%@ 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&hellip;</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;
	}
	
	
}

lazyload.rar (1.6 MB)
下载次数: 6

imakewebthings-jquery-waypoints-v1.1.7-0-g7a7e8d8.zip (59.2 KB)
下载次数: 3

分享到：

copy原来package后,提交时报svn is alrea ... | HP 开发流程

2012-12-10 17:06
浏览 2662
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

jQuery密码强度插件

jquery 跨域提交数据

实现select多选插件

jQuery插件 AjaxFileUpload 异步上传

按钮禁用 启用控制

Jquery评级星型插件

json

滚动动态加载插件lazyload

JQuery获取表单元素的值

jquery插件之jplayer

jQuery通过$.browser来判断浏览器

jquery validate

jQuery过滤选择器

Jquery实现Google自动补全效果

服务器端向客户端输出json

append()方法使用出错

Ajax使用时间戳来解决IE缓冲问题

JQuery常用积累(值得你进来！)

解决AJAX中文乱码

jquery validate

最近访客更多访客>>

按钮禁用启用控制