码迷,mamicode.com
首页 > 数据库 > 详细

加载信息,先从数据库取出5条实现分页,鼠标向上滑动触发Ajax再加载5条,达到异步刷新,优化加载。。。

时间:2016-08-12 17:56:45      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

php数据库取数据

<?php 
        include("conn1.php");
        include(../function/functions.php);
        $page=intval($_GET[page]);
        $page=$page==0?1:$page;
        $page_size=5;
        $limit = (($page - 1) * $page_size) . "," . $page_size;
        $sql="select *from v9_news where catid=182 and status=99 order by inputtime desc limit $limit"; 
      

         $result=mysqli_query($link,$sql); 
         $arr=array();
         $item=array();
         while($row=mysqli_fetch_assoc($result)){
             $row[inputtime]= date(m-d,$row[inputtime]);
             $row[updatetime]= date(m-d,$row[updatetime]);
              $arr[]=$row;
         }   
         $item[page]=$page;
         $item[item]=$arr; 
         $json=json_encode($item,JSON_UNESCAPED_UNICODE);
         echo $json;
        

jquery及ajax实现滑动请求加载

  function  onload1(url,a){
                    $.ajax({
                            type: "get",
                            url: url,
                            dataType: "json",
                            data: {
                                page:0,
                            },
                            success: function(data) {
                                $(a).html(makehtml0(data));
                           
                            },
                            error: function(i) {
                                alert("网络错误");
                            }
                        });
                 }
   function scroll1(url){
             var page=2;
            var old=0;
            var a=true; //开关定时器的作用   
             //向下滑动
            $("#item1mobile").scroll(function() {
                var $this = $(this),
                    viewH = $(this).height(), //可见高度312
                    contentH = $(this).get(0).scrollHeight, //内容高度422
                    scrollTop = $(this).scrollTop(); //滚动高度
                if(scrollTop > old) {
                    if(scrollTop / (contentH - viewH) >= 0.80) { //到达底部90%时,加载新内容
                        if(a){
                        $.ajax({
                            type: "get",
                            url: url,
                            dataType: "json",
                            data: {
                                page:page,
                            },
                            success: function(data) {
                                $(‘#item1mobile‘).append(makehtml0(data));
                                page=data.page+1;
                                a=true;

                            },
                            error: function(i) {
                                alert("网络错误");
                                a=true;
                            }
                        });
                    }
                    a=false;
                }
            }
                //上滑
                old = scrollTop
            });

  }
     var makehtml0 = function (data) {
            var html = ‘‘;
            for (var i = 0; i < data.item.length; i++) {
                
                html+="<div class=‘row‘>"+"<a href=‘detail/legaldetail.php?id=" + data.item[i].id
                + "‘>"+" <div class=‘col-xs-12 content‘>"+"<div class=‘col-xs-12 title‘>"
                +data.item[i].title+"</div>"+" <div class=‘col-xs-4 date‘>"
                +data.item[i].inputtime+"</div>"+"</div>"+"</a>"+
                "</div>"+"<div class=‘fenge111‘>"+"</div>";

            }
            return html;
        };

html页面

 <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
            
 </div>







<script src="./js/jquery.js"></script>
<script type="text/javascript">
             onload1(http://www.zbgh.org.cn/appUnion/data/legal-data-1.php,#item1mobile);
            scroll1(http://www.zbgh.org.cn/appUnion/data/legal-data-1.php);
</script>

 

加载信息,先从数据库取出5条实现分页,鼠标向上滑动触发Ajax再加载5条,达到异步刷新,优化加载。。。

标签:

原文地址:http://www.cnblogs.com/kangshuai/p/5765767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!