Basé sur ajax, cliquez pour charger plus sans actualiser et charger sur cette page

Cet article vous présentera comment réaliser un chargement sans actualisation grâce à la technologie ajax. Plus de chargement sur cette page, les amis intéressés peuvent apprendre ensemble

Je vais d'abord vous montrer le rendu :

Démonstration d'effet

Cet exemple est une autre façon d'afficher la pagination, il ne s'agit pas de masquer le contenu non affiché

La structure de la base de données est la même que "jax page tournant"

Code 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; ?>; 
  $(&#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>

Code XML/HTML

<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="ajax-loader.gif"> Loading...</p> 
</p>

fetch_pages.php

Code 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(&#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;; 
?>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir. .

Articles connexes :

La version Jquery1.8 utilise ajax pour implémenter l'analyse des problèmes et les solutions pour les appels WeChat

Analyse Jquery et solutions à l'échec de l'opération de téléchargement du fichier de requête Ajax

Écriture d'un composant ajax léger 01-Comparaison avec diverses méthodes d'implémentation sur la plateforme de formulaire Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!