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; ?>; $('#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 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('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>'; ?>
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
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!