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


  • 相关阅读:
    Application
    Intent
    C#Winform实现自动更新
    Activity的四种启动模式
    小白学Python——用 百度翻译API 实现 翻译功能
    小白学Python——用 百度AI 实现 OCR 文字识别
    小白学Python——Matplotlib 学习(3) 函数图形
    小白学Python——Matplotlib 学习(2):pyplot 画图
    小白学Python——Matplotlib 学习(1)
    小白学Python(20)—— Turtle 海龟绘图
  • 原文地址:https://www.cnblogs.com/lixin890808/p/2976123.html
Copyright © 2020-2023  润新知