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 + ");");

 

 



 

posted @ 2013-03-22 18:15  大都督  阅读(651)  评论(0编辑  收藏  举报