通过jQuery写一个自动“加载更多”的功能

最近我的网站有这么一个业务需求：对用户查询出来得数据进行分页，一页显示10个。而我有不想做传统意义上的分页了，想做一个加载更多的功能。

业务逻辑：判断滚动条的位置，当滚动条接近文章底部的时候，就通过ajax请求数据，并且将数据添加到文章列表的后面。

下面是我写的具体的逻辑代码

<!--下滑加载更多-->
<script type="text/javascript">
      $(function(){
      // 页数
      var page = 1;
      //获取文章总数量
      var query_length=${requestScope.search.query_length };
      //获取页数
      var maxpage= Math.ceil(query_length/10);
      //获取搜索条件
      var keyword = $('.insearch').val();
      var end=0;
 
     
     
    $(window).bind("scroll",function(){
    
      if ($(document).scrollTop() + document.body.clientHeight >= ($(document).height()-300)) {
         if(end==1){
         return false;
         }
         page++;
         end=1;
         if(page>maxpage){
         return false;
         }
          
         //进行ajax操作
           $.ajax({
            
             type: 'post',
                  contentType: "application/json;charset=utf-8",
                  dataType:"json",
                  data:JSON.stringify({
                  q:$.trim($('.insearch').val()),
                  p:$.trim(page)
                  }),
                  url: './search/query_more.action',
             //如果接收成功
                  success: function(data){
                   
                  var li_list="";
                  var li_string="";
                  //对此进行遍历
                 for(var i=0;i<data.length;i++){
                 li_string="<li class=\"clearfix\"><div class=\"new_text\" style=\"float: left;width: 100%;\"><a  class=\"l_text\" href=\"./p/"+data[i].article_id+".html\" style=\"padding-bottom: 0px;\"><h2 class=\"title\">"+data[i].article_title+"</h2><p>"+data[i].article_summary+"</p></a></div></li>";
                 
                li_list+=li_string;
                 
                 }
                  $('.post_list').append(li_list);
                  end=0;
                  
                  },error: function(xhr, type){
                    alert('Ajax error!');
                  }
            
           });
         
     
       
   };
     
    });
       
       
     
  });
  </script> 

首先是将文章的页数置为1，然后根据文章的总数量，通过js的函数获取应该有多少页。

然后，我们通过滚动事件，进行滚动，然后通过ajax去取数据，并且将返回的json数据遍历，append到文章列表后面。
本文链接 https://inx.fun/p/530.html