欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

PHP实现页面向下滚动时加载数据

程序员文章站 2022-05-24 20:26:08
...

欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 随着微博的盛行,页面向下滚动时加载数据变的越来越流程,类似瀑布流的效果。这种方法不仅节省了服务器端负载,因为不需要分页就能看到所有的信息,所以也提高了用户体验度,下面给大家分享一个利用P

欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入

  随着微博的盛行,页面向下滚动时加载数据变的越来越流程,类似瀑布流的效果。这种方法不仅节省了服务器端负载,因为不需要分页就能看到所有的信息,所以也提高了用户体验度,下面给大家分享一个利用PHP+jQuery简单实现这一效果的例子。

  因为要用到jQuery函数,所以引入jQuery类库是必不可少的,这里不在介绍了,下面提供给大家的源码中有jQuery文件,大家可以直接拿去使用。

  然后在需要滚动加载信息的页面输入下面的JS代码(如果有多个页面需要,那么你也可以将它单独保存到js文件中):

  $(document)。ready(function(){

  $(window)。scroll(function(){

  scrollMore();

  });

  function scrollMore(){

  if($(window)。scrollTop() == ($(document)。height() - $(window)。height())){

  var offset = $('[id^="myData_"]')。length;

  var records = $(".allData")。text();

  $(window)。unbind("scroll");

  if(records != offset){

  $("#loaderImg")。html('PHP实现页面向下滚动时加载数据');

  $("#loaderImg")。show();

  loadMoreData(offset);

  }

  }

  }

  function loadMoreData(offset){

  $.ajax({

  type: 'get',

  async:false,

  url: 'getMoreData.php',

  data: 'offset='+offset,

  success: function(data){

  $("#loaderImg")。empty();

  $("#loaderImg")。hide();

  $(".loadData :last")。after(data);

  },

  error: function(data){

  alert("ajax error occured…"+data);

  }

  })。done(function(){

  $(window)。bind("scroll",function(){

  scrollMore();

  });

  });

  }

  });

  下面是PHP代码:

  这里PHP代码只要实现读取数据库数据就可以了,因为在上面我们已经实现了滚动的加载的效果。

  

  include('connection.php');

  $offset = (isset($_REQUEST['offset']) && $_REQUEST['offset']!='') ?

  $_REQUEST['offset'] : '';

  $limit = 10;

  $qry1 = mysql_query("select * from message limit ".$offset.", ".$limit."");

  $i = ++$offset;

  while($result = mysql_fetch_array($qry1)){ ?>

  

  

  

  

  

PHP实现页面向下滚动时加载数据