先给大家展示效果图:
数据库结构与《ajax 翻页》是一样的
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>
XML/HTML代码
<div id="results"></div> <div align="center"> <button class="load_more" id="load_more_button">load More</button> <div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div> </div>
fetch_pages.php
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>'; ?>
以上内容是小编给大家介绍的基于ajax实现点击加载更多无刷新载入到本页,希望大家喜欢。
4月11日20:30~22:00通过腾讯会议进行了第二次在线学习讨论我把学习笔记整理一下...
DELETEFROMTablesWHEREIDNOTIN(SELECTMin(ID)FROMTablesGROUPBYName) Min的话保...
复制代码 代码如下: % URL="http://news.163.com/special/00011K6L/rss_newstop....
上篇文章给大家介绍了 Java正则表达式匹配,替换,查找,切割的方法 ,接下来,...
工具:Eclipse,Oracle,smartupload.jar;语言:jsp,Java;数据存储:Oracle。...
正则忽略大小写 – RegexOptions.IgnoreCase 例如: 复制代码 代码如下: Str = R...
错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报...
Elasticsearch 是通过 Lucene 的倒排索引技术实现比关系型数据库更快的过滤。特...
本文实例讲述了Laravel框架源码解析之反射的使用。分享给大家供大家参考,具体如...
项目中用到的一些特殊字符和图标 html代码 XML/HTML Code 复制内容到剪贴板 div ...