现在的位置: 网页制作教程JS网页特效 >正文
jquery相关教程

怎么实现滚屏无刷新动态加载内容

发表于2016/11/13 JS网页特效 0条评论 ⁄ 热度 3,413℃
导语:相信很多用户浏览网页都遇到过,当将浏览器滚动条拉到页面底部时,页面就会自动加载内容供用户浏览,这样的设计用户体验很好,不需要用户去点击鼠标翻页。那么我们该如何实现这种滚屏无刷新加载内容的效果呢?

Ajax技术的应用,让web开发更加绚丽多彩,毫无疑问,这个效果的实现是借助ajax动态获取服务器端数据。

jquery实现滚屏加载数据

滚屏无刷新动态加载内容原理:

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台程序,服务器端返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,这其实就是一个典型的Ajax应用。

滚屏动态加载内容的实现方法:

本文将结合ajax、js代码,为您讲解如何应用滚屏加载技术到您的项目中去。当然,阅读本文的前提是您需要有js相关基础。

如果我们页面初始要显示20条数据,那么先将这20条数据取出显示到页面上,后面每触发一次ajax就取一定数量的数据加载到页面上,具体每次显示多少数据,是在服务器端程序控制的。

JS程序结束

在这个案例中,js需要做的工作有获取浏览器高度、计算页面总高度、计算滚动条位置、发送请求到服务器、接受返回的数据解析并追加到页面中。

首先,获取浏览器可视区域高度。

var winH = $(window).height();

获取浏览器信息

$(window).scroll(function () {     
  var pageH = $(document.body).height(); //页面总高度     
  var scrollT = $(window).scrollTop(); //滚动条距离顶部高度     
  var aa = (pageH-winH-scrollT)/winH;  //滚动条移动距离触发ajax
});

当浏览器滚动条到页底时就触发ajax加载,在本例中我们使用jQuery的getJSON方法,向服务端result.asp发送请求,请求的参数为page,即页数。

if(aa<0.02){ 
     $.getJSON("result.asp",{page:i},function(json){       .....  });、 } 

如果请求响应成功返回JSON数据,则解析JSON数据,并将数据追加到页面DIV#container后,如果没有JSON数据返回,则说明数据全部显示完毕。

if(json){    
  var str = "";
  $.each(json,function(index,array){ //遍历
    var str = "..."; //获取的JSON数据
    $("#container").append(str); //追加
  });
  i++;  //页数+1
}else{
  $(".nodata").show().html("已经没有数据了。");
  return false;
} 

完整的js代码:

$(function(){    
 var winH = $(window).height(); //页面可视区域高度    
 var i = 1; //设置当前页数    
 $(window).scroll(function () {        
  var pageH = $(document.body).height();        
  var scrollT = $(window).scrollTop(); //滚动条top        
  var aa = (pageH-winH-scrollT)/winH;        
  if(aa<0.02){            
   $.getJSON("result.asp",{page:i},function(json){                
    if(json){                   
      var str = "";                    
      $.each(json,function(index,array){                        
       var str = "<div class=\"single_item\"><div class=\"element_head\">";
       var str += "<div class=\"date\">"+array['date']+"</div>";
       var str += "<div class=\"author\">"+array['author']+"</div>";
       var str += "</div><div class=\"content\">"+array['content']+"</div></div>";                        
       $("#container").append(str);                    
      });                    
      i++;                
     }else{                    
      $(".nodata").show().html("已经没有数据了。");                    
      return false;                
     }            
    });        
   }    
  });
}); 

服务器端介绍

本案例中向服务器端请求的参数时page,服务端程序根据参数返回相应的数据。

服务器端程序可以根据实际需求,灵活返回相应的数据。

本案例中返回的数据格式是:

[{"content":"内容","author":"www.webym.net","date":"时间"}]

好了,关于滚屏无刷新动态加载内容就介绍到这里,另外还有一种用户评论的效果,用户提交评论,页面不用刷新,发表的评论直接显示在评论区。感兴趣的童鞋可以看看无刷新评论

,你可以结合我们之前讲的无刷新技术来完善自己的网站,提升用户体验
  • 暂无评论