首页 建站知识 源码分享 素材下载 经验分享

PHP+MYSQL+AJAX上拉加载数据

发布时间:2019年08月11日 10:07:59
20

一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。

通过ajax向后端接口发起翻页请求,发送页码,后端接收页码,返回json数据,前端jquery解析json并且拼接在原有的数据基础上!

数据库设计:

CREATE TABLE IF NOT EXISTS `rj_article_ajax` (
  `aid` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(100) DEFAULT NULL,
  `hits` int(11) DEFAULT '0' COMMENT '点击率',
  `addtime` datetime NOT NULL COMMENT '添加时间',
  `adesc` longtext COMMENT '描述',
  `img` varchar(255) DEFAULT NULL,
  `class` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`aid`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;

PHP+MYSQL+AJAX上拉加载数据.jpg

网盘下载地址
密码:8ysz
    var PageNo = 1;
	//默认首次显示数据数量
    var PageSize = 4;
    $(document).ready(function(){
        $.get("getdata.php",function(data){
            $("#list").html(data);
        })
    })
    iIntervalId = setInterval("test();",2000);
    function show(){
        PageNo++;
        pageOffset = (PageNo-1)*PageSize+1;
        $.get("getdata.php?act=get_more&LimitStart="+pageOffset+"&PageNo="+PageNo+'&r='+Math.random(),function(data){
            if('failure' != data){
            $("#list").append(data);
            //$("#nodata").html('显示更多结果');
            }
        })
       
    }
    //当前滚动条位置高度
function getScrollTop(){     
  var scrollTop=0;       
  if(document.documentElement&&document.documentElement.scrollTop){         
       scrollTop=document.documentElement.scrollTop; 
  } else if(document.body)
  {         
       scrollTop=document.body.scrollTop;      
  }     
   return scrollTop;   
  }  
      
  //取窗口可视范围的高度  
  function getClientHeight(){     
       var clientHeight=0;       
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {          
      var clientHeight = (document.body.clientHeightdocument.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;          
        }     
         return clientHeight;   
  }
  
//显示状态加载图片
function showLoadingImg() {
  $('#nodata').html('');
}
	//取得当前页面显示所占用的高度
    function getScrollHeight()
    {
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);   
    }
     function test()
     {
         if (getScrollTop()+getClientHeight()==getScrollHeight())
         {   
             //此处还要做判断,判断数据是否已经加载完,若加载完就不在显示加载图片
             $.get("getdata.php?act=GetPageTotal",function(data){
                 //var string = PageNo + '----' + data;
                 //alert(string);
                 if(PageNo >= data){
                     clearInterval(iIntervalId);
					 $('#nodata').html('没有更多内容了');
                     //$("#nodata").hide();
                     return;
                 }
             })
             showLoadingImg();
             show();
              
         }         
     }
//连接数据库的参数  
$host = "127.0.0.1";  
$user = "root";  
$pass = "root";  
$db = "demo4";  
$conn = mysql_connect($host,$user,$pass);
mysql_select_db($db);
mysql_query("SET NAMES UTF8");
$act = empty($_GET['act']) ? '' : $_GET['act'];
if('GetPageTotal' == $act){
    $sql = "SELECT COUNT(*) AS c FROM rj_article_ajax";
    $result =mysql_query($sql);
    $row = mysql_fetch_array($result);
    $Total = $row['c'];
	//默认首次显示数据数量
    $PageSize = 4;
    echo $PageTotal = ceil($Total/$PageSize);
}
if ('' == $act) {
    $sql = "SELECT * FROM rj_article_ajax ORDER BY aid DESC LIMIT 0,4";
    $result = mysql_query($sql);
    $arrAll = array();
    while ($arr = mysql_fetch_object($result))
    {   
        echo "
".$arr->title."
".$arr->addtime."
查看全文
"; } } if ('get_more' == $act) { $sql = "SELECT COUNT(*) AS c FROM rj_article_ajax"; $result =mysql_query($sql); $row = mysql_fetch_array($result); $Total = $row['c']; //加载显示数 $PageSize = 4; $PageTotal = ceil($Total/$PageSize); $LimitStart = (int)$_GET['LimitStart']; $PageNo = (int)$_GET['PageNo']; if ($PageNo <= $PageTotal) { $sql = "SELECT * FROM rj_article_ajax ORDER BY aid DESC LIMIT $LimitStart,4"; $result = mysql_query($sql); $arrAll = array(); while ($arr = mysql_fetch_object($result)) { echo "
".$arr->title."
".$arr->addtime."
查看全文
"; } }else { echo 'failure'; } }
点赞
(0)|
收藏
(0)
|
纠错
|
下载次数
52
浏览 155 次
发布时间:2019年08月14日 21:42:32 所属 PHP知识 ajax+php实现无刷新验证手机号的实例
ajax+php实现无刷新验证手机号的实例
ajax+php实现无刷新验证手机号的实例
PHP知识
发布时间:2019年08月11日 10:07:59 所属 php源码 PHP+MYSQL+AJAX上拉加载数据
PHP+MYSQL+AJAX上拉加载数据
PHP+MYSQL+AJAX实现上拉无刷新加载更多数据,一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。
php源码
20

推荐分享

热门