Rumah > php教程 > php手册 > PHP实现页面向下滚动时加载数据

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

WBOY
Lepaskan: 2016-06-06 19:52:53
asal
2034 orang telah melayarinya

欢迎进入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实现页面向下滚动时加载数据

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan