Basierend auf Ajax, klicken Sie, um ohne Aktualisierung mehr zu laden und auf diese Seite zu laden

In diesem Artikel erfahren Sie, wie Sie mithilfe der Ajax-Technologie ein Laden ohne Aktualisierung erreichen können. Interessierte Freunde können gemeinsam lernen

Ich zeige Ihnen zuerst das Rendering:

Effektdemonstration

Dieses Beispiel ist eine weitere Möglichkeit, Paginierung anzuzeigen, es geht nicht darum, nicht angezeigte Inhalte zu verbergen

Die Datenbankstruktur ist die gleiche wie beim „Ajax-Umblättern“

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="ajax-loader.gif"> 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;; 
?>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Jquery1.8-Version verwendet Ajax, um Problemanalysen und Lösungen für WeChat-Anrufe zu implementieren

Jquery-Analyse und Lösungen für den Ausfall des Ajax-Anforderungsdatei-Downloadvorgangs

Schreiben der leichten Ajax-Komponente 01 – Vergleich mit verschiedenen Implementierungsmethoden auf der Webform-Plattform

Das obige ist der detaillierte Inhalt vonBasierend auf Ajax, klicken Sie, um ohne Aktualisierung mehr zu laden und auf diese Seite zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!