


Basé sur ajax, cliquez pour charger plus sans actualiser et charger sur cette page
May 24, 2018 pm 04:08 PMCet 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; ?>; $('#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>
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('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>'; ?>
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 :
Analyse Jquery et solutions à l'échec de l'opération de téléchargement du fichier de requête Ajax
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds
![Erreur de chargement du plugin dans Illustrator [Corrigé]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Erreur de chargement du plugin dans Illustrator [Corrigé]

Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres

Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX

Comment résoudre l'erreur 403 de la requête jQuery AJAX

Outlook se bloque lors de l'insertion d'un lien hypertexte

Comment obtenir des variables de la méthode PHP en utilisant Ajax ?

Comment résoudre le problème de l'erreur 403 jQuery AJAX ?

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement
