Based on ajax, click to load more without refreshing and load to this page

This article will introduce to you how to achieve non-refresh loading through ajax technology. More loading to this page, interested friends can learn together

I will show you the renderings first:

Effect Demonstration

This example is another way to display pagination, it is not to hide the undisplayed content

The database structure is the same as "ajax page turning"

JavaScript code

<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; ?>; 
  $(&#39;#results&#39;).load("fetch_pages.php", {&#39;page&#39;: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 
    $(&#39;.animation_image&#39;).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(&#39;fetch_pages.php&#39;,{&#39;page&#39;: 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 
        $(&#39;.animation_image&#39;).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 
        $(&#39;.animation_image&#39;).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 code

<p id="results"></p> 
<p align="center"> 
<button class="load_more" id="load_more_button">load More</button> 
<p class="animation_image" style="display:none;"><img  src="/static/imghwm/default1.png"  data-src="ajax-loader.gif"  class="lazy"   alt="Based on ajax, click to load more without refreshing and load to this page" > Loading...</p> 
</p>

fetch_pages.php

php code

<?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(&#39;HTTP/1.1 500 Invalid page number!&#39;); 
  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 &#39;<ul class="page_result">&#39;; 
while($row = mysql_fetch_array($results)) 
{ 
  echo &#39;<li id="item_&#39;.$row["id"].&#39;"><span class="page_name">&#39;.$row["id"].&#39;) &#39;.$row["name"].&#39;</span><span class="page_message">&#39;.$row["message"].&#39;</span></li>&#39;; 
} 
echo &#39;</ul>&#39;; 
?>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jquery1.8 version uses ajax to implement problem analysis and solutions for WeChat calls

Jquery Analysis and solutions for the failure of Ajax request file download operation

Writing lightweight ajax component 01-Comparison with various implementation methods on the webform platform

The above is the detailed content of Based on ajax, click to load more without refreshing and load to this page. For more information, please follow other related articles on the PHP Chinese website!