js瀑布流加载数据
<!-- HTML code -->
<div class="loadding" style="diplay:none" id="loadding"> 数据加载中,请稍后... </div>
<script type="text/javascript"> (function() { var pageNo = 2 , PageCount = 3 , toLoad = true; window.onload = window.onscroll = function() { var ot = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop, ch = document.body.clientHeight, och = document.documentElement.clientHeight, preCondition = 100; flag = ot > ch - och - preCondition; if (flag && (pageNo <= PageCount) && toLoad) { toLoad = false; var loading = document.getElementById('loadding'); loading.style.display = 'block'; // var timer = window.setInterval(function(){ // window.clearInterval(timer); $.getJSON('action/do_post.jsp?callback=?', {method: "update",pageNo:pageNo}, function(data) { pageNo = data.PageNo + 1; PageCount = data.PageCount; var msg = data.msg; switch (msg) { case "success": var _html = ''; for (var i = 0; i < data.posts.length; i++) { var voteId = data.posts[i].voteId; _html += "<li>"; _html += "<p>" + data.posts[i].content + "</p>"; _html += "<i class='vote-counter-'+"+voteId+">" + ${voteService.getCounter(212)}+"</i>"; _html += "</li>"; }; $('#ulList').html($('#ulList').html() + _html); break; case "offline": alert("活动下线,谢谢参与"); break; case "exist": alert("重复提交"); break; default: alert(msg); break; }; toLoad = true; }); // },1000); }
loading.style.display = 'none'; } })() /* 后台以分页的形式反馈json数据 * toLoad:请求的数据加载完才执行下次请求(数据的加载会触发 window.onscroll 方法) * ot:解决各浏览器的兼容性(是否遵循W3C所制定的DTD规格) * flag:滚动条下拉的值大于某个值时执行 * 注释的部分为设置加载数据的时间间隔 * getCounter(212) js 和 el 表达式不能互传数据 */ </script>
// Java code (do_post.jsp) Pager<Post> post_pager = genericService.pager(Post.class, "a INNER JOIN pconline130301_types b ON a.typesid=b.typesid AND b.name='" + types + "' AND a.status=0 ORDER BY a.createdate DESC", pageNo, pageSize); results.element("PageNo",post_pager.getPageNo()); results.element("PageCount",post_pager.getPageCount()); results.element("posts",post_pager.getResultList()); results.element("msg", "success"); out.print(request.getParameter("callback") + "(" + results + ");");