标签：分页取数据
本文通过获取首页内容来讲解Web页面拖拽获取当前页数据，功能类似在google查看图片，这里面涉及如下五个步骤：
（1）页面首次加载时读取第一页数据
（2）触发滚动条拖拽动作
（3）Ajax异步读取下一页数据
（4）服务端把数据封装为Json返回
（5）把页面数据通过DOM元素绘制在页面上
接下来就按这五个步骤依次进行
1、页面首次加载时会加载main.js文件。在此文件中增加CURRENT_ITEM_INDEX变量，用于标识当前话题的索引值；增加方法getPageContent()，用于页面加载时调用，获取第一页数据。
/**
* 按时间降序排列后标识页面最后一条记录的索引值
*/
var CURRENT_ITEM_INDEX = 0;
$(document).ready(function()
{
// 获取首页内容
getPageContent(CURRENT_ITEM_INDEX);
});
function getPageContent(currentIndex)
{
var data = {"currentIndex": currentIndex};
asyncRequest("mainContent.data", data, function(result)
{
// 由第3步实现
});
}2、触发滚动条拖拽动作。在main.js加载时对window绑定scroll事件
$(document).ready(function()
{
// 略
getBreifUserInfo();
// 监听滚动条拖拽事件
bindScrollEvent();
});【备注】：由于涉及到不断地下拉滚动条，所以需要增加一个标识isQueryFlag，若正在查找数据时则不再响应下拉事件
/**
* 是否正在查询数据标识
*/
var isQueryFlag = false;
3、Ajax异步读取下一页数据。实现bindScrollEvent()方法：
/**
* 绑定滚动条拖拽事件
*/
function bindScrollEvent()
{
var scrollBarDistance = 0; // 滚动条的当前位置
var documentHeight = 0; // 文档高度
var windowHeight = $(window).height(); // 当前窗口高度
$(window).scroll(function(){
scrollBarDistance = $(document).scrollTop();
documentHeight = $(document).height();
if(scrollBarDistance + windowHeight >= documentHeight)
{
if(isQueryFlag === true)
{
return;
}
// 获取页面内容
getPageContent(CURRENT_ITEM_INDEX);
}
});
}4、服务端把数据封装为Json返回
（1）修改配置文件system-data.xml，把拖拽动作方法与服务端读取数据的业务处理逻辑关联起来
<!--获取系统首页内容信息--> <business name="mainContent" business-class="com.medical.server.data.MainDataAction" />
（2）定义服务端读取数据的业务处理类com.medical.server.data.MainDataAction
@Override
public String execute() throws FrameException
{
// 获取当前记录索引值
String currentIndex = getParameter("currentIndex");
if (FrameUtil.isEmpty(currentIndex))
{
TopicResultBean result = new TopicResultBean();
result.setErrorCode(FrameErrorCode.REQUEST_PARAM_ERROR);
return gson.toJson(result);
}
// 从数据库中读取数据
int index = Integer.valueOf(currentIndex);
List<TopicDAO> topicList = TopicUtil.getTopicList(index);
if (FrameUtil.isEmpty(topicList))
{
TopicResultBean result = new TopicResultBean();
result.setErrorCode(FrameErrorCode.REQUEST_CONTENT_EMPTY);
return gson.toJson(result);
}
// 组装界面所需要内容
List<TopicBean> topicBeanList = new ArrayList<TopicBean>();
for (TopicDAO element : topicList)
{
UserDAO author = UserUtil.getUserByName(element.getUserId());
TopicBean bean = new TopicBean();
bean.setUserName(author.getUserId());
bean.setUserIcon(author.getIconPath());
bean.setNickName(author.getUserSign());
bean.setTopicId(element.getTopicId());
bean.setTopicTitle(element.getTopicTitle());
bean.setCommentNum(CommentUtil.getCommentNum(element.getTopicId()));
bean.setTopicSummary(getTopicSummary(element.getPrescript()));
bean.setTopicTime(element.getTopicTime());
topicBeanList.add(bean);
}
// 返回JSON结果
TopicResultBean result = new TopicResultBean();
result.setErrorCode(0);
result.setTopicList(topicBeanList);
return gson.toJson(result);
}【备注】：为了使内容简洁，中间省略了一些处理函数
5、把页面数据通过DOM元素绘制在页面上
（1）异步读取数据，并对数据合法性进行判断
// 设置查询标识
isQueryFlag = true;
asyncRequest("mainContent.data", data, function(result)
{
// 若读取数据未成功直接返回
var resultJson = eval(result);
if(resultJson.errorCode != 0)
{
return;
}
var topicList = resultJson.topicList;
if(!topicList){
return;
}
// 重置数据当前索引值
CURRENT_ITEM_INDEX = CURRENT_ITEM_INDEX + topicList.length;
// 操纵DOM把数据绘制到页面上
$.each(topicList, function(i, item){
appendData(i, item);
});
// 重置查询标识
isQueryFlag = false;
});（2）DOM元素绘制的实现
/**
* 操纵DOM把数据绘制到页面上
*/
function appendData(i, item)
{
var topicItem = $("<div />").attr("class", "main_item");
topicItem.appendTo($("#main_content_dynamic_id"));
// 添加用户头像
var userIcon = $("<i />").attr("class", "main_item_icon");
userIcon.appendTo(topicItem);
// 添加挑战内容
var content = $("<div />").attr("class", "main_item_content");
content.appendTo(topicItem);
// >>>>>>设置挑战话题标题
var topWrapper = $("<div />").attr("class", "main_item_wrapper");
var topicTitle = $("<div />").attr("class", "main_item_title");
var titleLink = $("<a />").attr("href", "#").text(item.topicTitle);
titleLink.appendTo(topicTitle);
topicTitle.appendTo(topWrapper);
topWrapper.appendTo(content);
// >>>>>>设置挑战话题标题
var topicTime = $("<div />").attr("class", "main_item_time").text(item.topicTime);
topicTime.appendTo(topWrapper);
// >>>>>>设置用户名称和昵称
var centerWrapper = $("<div />").attr("class", "main_item_wrapper");
var userName = $("<label />").attr("class", "main_item_author").text(item.userName + "，");
var userNick = $("<label />").attr("class", "main_item_nickname").text(item.nickName);
userName.appendTo(centerWrapper);
userNick.appendTo(centerWrapper);
centerWrapper.appendTo(content);
// >>>>>>设置话题摘要信息
var middleWrapper = $("<div />").attr("class", "main_item_wrapper");
var topicSummary = $("<div />").attr("class", "main_item_substance").html(item.topicSummary);
topicSummary.appendTo(middleWrapper);
middleWrapper.appendTo(content);
// >>>>>>设置话题附属信息
var bottomWrapper = $("<div />").attr("class", "main_item_wrapper");
var topicAttach = $("<div />").attr("class", "main_item_attach");
topicAttach.appendTo(bottomWrapper);
bottomWrapper.appendTo(content);
// >>>>>>>>>>>>设置话题关注信息
var followLink = $("<a />").attr("href", "#");
var followIcon = $("<i />").attr("class", "main_item_attention");
followIcon.appendTo(followLink);
followLink.appendTo(topicAttach);
followLink.text("关注");
// >>>>>>>>>>>>设置话题关注信息
var commentLink = $("<a />").attr("href", "#");
var commentIcon = $("<i />").attr("class", "main_item_discuss");
commentIcon.appendTo(commentLink);
commentLink.appendTo(topicAttach);
commentLink.text(item.commentNum + "人评论");
// >>>>>>>>>>>>设置话题分享信息
var shareLink = $("<a />").attr("href", "#");
var shareIcon = $("<i />").attr("class", "main_item_share");
shareIcon.appendTo(shareLink);
shareLink.appendTo(topicAttach);
shareLink.text("分享");
// >>>>>>>>>>>>设置话题收藏信息
var favoriteLink = $("<a />").attr("href", "#");
var favoriteIcon = $("<i />").attr("class", "main_item_collection");
favoriteIcon.appendTo(favoriteLink);
favoriteLink.appendTo(topicAttach);
favoriteLink.text("收藏");
}6、效果演示
（1）向数据表topictable中增加两条记录
（2）在浏览器输入http://localhost:8080/medical，效果如下：
【备注】：
1、可以多插入些记录，就可以观察拖拽效果了 
2、这里的拖拽事件没有考虑窗口的缩小与放大情况
3、为了简洁起见，没有增加返回顶端功能
本文出自 “青客” 博客，请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1544928
标签：分页取数据
原文地址：http://qingkechina.blog.51cto.com/5552198/1544928
