zoukankan      html  css  js  c++  java
  • 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 + ");");


  • 相关阅读:
    jQuery的deferred对象详解
    2016.7.15见闻
    如何在win7下配置IIS?
    对于transform的新认识
    移动前端工作的那些事---前端制作之微信小技巧篇
    css改变图片的颜色
    对promise的简单理解
    小程序打印饼图报错VM6541:1 thirdScriptError Converting circular structure to JSON;
    小程序使用echarts 在一个页面打印多个饼图的坑
    小程序使用wx.navigateTo无法跳转到加了tabBar的页面
  • 原文地址:https://www.cnblogs.com/lixin890808/p/2976123.html
Copyright © 2011-2022 走看看