ajax如何实现点击加载更多无刷新载入到本页

这篇文章将为大家详细讲解有关ajax如何实现点击加载更多无刷新载入到本页，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联是工信部颁发资质IDC服务器商，为用户提供优质的郑州服务器托管服务

先给大家展示效果图：

效果演示

本例是分页的另外一种显示方式,并不是隐藏未显示的内容

数据库结构与《ajax 翻页》是一样的

JavaScript 代码

 
$(document).ready(function() { 
  var track_click = ; //track user click on "load more" button, righ now it is click 
  var total_pages = ; 
  $('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load 
  $(".load_more").click(function (e) { //user clicks on button 
    $(this).hide(); //hide load more button on click 
    $('.animation_image').show(); //show loading image 
    if(track_click <= total_pages) //make sure user clicks are still less than total pages 
    { 
      //post page number and load returned data into result element 
      $.post('fetch_pages.php',{'page': track_click}, function(data) { 
        $(".load_more").show(); //bring back load more button 
        $("#results").append(data); //append data received from server 
        //scroll page to button element 
        $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, ); 
        //hide loading image 
        $('.animation_image').hide(); //hide loading image once data is received 
        track_click++; //user click increment on load button 
      }).fail(function(xhr, ajaxOptions, thrownError) {  
        alert(thrownError); //alert any HTTP error 
        $(".load_more").show(); //bring back load more button 
        $('.animation_image').hide(); //hide loading image once data is received 
      }); 
      if(track_click >= total_pages-) 
      { 
        //reached end of the page yet? disable load button 
        $(".load_more").attr("disabled", "disabled"); 
      } 
     } 
    }); 
}); 

XML/HTML代码