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

前端技术 2023/09/03 AJAX

先给大家展示效果图：

效果演示

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

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

JavaScript 代码

<script type=\"text/javascript\"> 
$(document).ready(function() { 
  var track_click = ; //track user click on \"load more\" button, righ now it is click 
  var total_pages = <?php echo $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\"); 
      } 
     } 
    }); 
}); 
</script>

XML/HTML代码

<div id=\"results\"></div> 
<div align=\"center\"> 
<button class=\"load_more\" id=\"load_more_button\">load More</button> 
<div class=\"animation_image\" style=\"display:none;\"><img src=\"ajax-loader.gif\"> Loading...</div> 
</div>

 fetch_pages.php

 php代码

<?php 
include(\"conn.php\"); 
$item_per_page = 3; 
//sanitize post value 
$page_number = filter_var($_POST[\"page\"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); 
 
//throw HTTP error if page number is not valid 
if(!is_numeric($page_number)){ 
  header(\'HTTP/1.1 500 Invalid page number!\'); 
  exit(); 
} 
 
//get current starting point of records 
$position = ($page_number * $item_per_page); 
 
//Limit our results within a specified range.  
$results = mysql_query(\"SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page\"); 
 
//output results from database 
echo \'<ul class=\"page_result\">\'; 
while($row = mysql_fetch_array($results)) 
{ 
  echo \'<li id=\"item_\'.$row[\"id\"].\'\"><span class=\"page_name\">\'.$row[\"id\"].\') \'.$row[\"name\"].\'</span><span class=\"page_message\">\'.$row[\"message\"].\'</span></li>\'; 
} 
echo \'</ul>\'; 
?>

以上内容是小编给大家介绍的基于ajax实现点击加载更多无刷新载入到本页，希望大家喜欢。

本文地址：https://www.stayed.cn/item/7303

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案