本文共 6854 字,大约阅读时间需要 22 分钟。
本文通过获取首页内容来讲解Web页面拖拽获取当前页数据,功能类似在google查看图片,这里面涉及如下五个步骤:
(1)页面首次加载时读取第一页数据
(2)触发滚动条拖拽动作
(3)Ajax异步读取下一页数据
(4)服务端把数据封装为Json返回
(5)把页面数据通过DOM元素绘制在页面上
接下来就按这五个步骤依次进行
1、页面首次加载时会加载main.js文件。在此文件中增加CURRENT_ITEM_INDEX变量,用于标识当前话题的索引值;增加方法getPageContent(),用于页面加载时调用,获取第一页数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /** * 按时间降序排列后标识页面最后一条记录的索引值 */ 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事件
1 2 3 4 5 6 7 | $(document).ready( function () { // 略 getBreifUserInfo(); // 监听滚动条拖拽事件 bindScrollEvent(); }); |
【备注】:由于涉及到不断地下拉滚动条,所以需要增加一个标识isQueryFlag,若正在查找数据时则不再响应下拉事件
/**
* 是否正在查询数据标识
*/
var isQueryFlag = false;
3、Ajax异步读取下一页数据。实现bindScrollEvent()方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * 绑定滚动条拖拽事件 */ 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,把拖拽动作方法与服务端读取数据的业务处理逻辑关联起来
1 2 | <!--获取系统首页内容信息--> < business name = "mainContent" business-class = "com.medical.server.data.MainDataAction" /> |
(2)定义服务端读取数据的业务处理类com.medical.server.data.MainDataAction
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | @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)异步读取数据,并对数据合法性进行判断
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // 设置查询标识 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元素绘制的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /** * 操纵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、为了简洁起见,没有增加返回顶端功能
本文出自 “” 博客,请务必保留此出处