js代码
JavaScript Code复制内容到剪贴板
- <script type="text/javascript">
- $(document).ready(function() {
- var track_click = 0; //track user click on "load more" button, righ now it is 0 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}, 500);
- //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-1)
- {
- //reached end of the page yet? disable load button
- $(".load_more").attr("disabled", "disabled");
- }
- }
- });
- });
- </script>
主要代码
XML/HTML Code复制内容到剪贴板
- <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 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>';
- ?>
相关推荐
本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与《ajax 翻页》是一样的 JavaScript 代码 [removed] $(document).ready(function() { var track_click = ; //track user click on "load more" ...
原理:页面载入时,jQuery向后台请求数据,ASP程序通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台ASP程序接收请求参数,并作出相应,...
ASP+jQuery+JSON无刷新加载更多内容,我们在一些腾讯网站评论栏目上可以看到这样的应用,列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“加载更多”来查看...
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,...
运行环境: ASP/Access ...7.已对页脚以及搜索等部件用SUB调用方便修改,更多体验请下载测试或者访问展示网址。 前台和后台帐号admin@ewuyi.net 密码253252545 使用前请修改config.asp的各项参数,使用方正常
- 更多场景等你来挖掘!…… #### 3.使用说明 管理员: admin/admin 普通用户:demo/demo 游客用户:guest/guest [如何使用] 下载程序,解压上传到你的服务器路径下,data目录设置777权限。访问体验超便捷的服务...
* 类似AJAX的无刷新上传; * 可以显示上传进度; * 良好的浏览器兼容性; * 兼容其他JavaScript库 (例如:jQuery, Prototype等); * 支持Flash 8和Flash 9; SWFUpload不同于其他基于Flash构建的上传...
您将在本教程下面的章节学习更多有关 callback 参数的知识。 实例 $("button").click(function(){ $("p").hide(1000); }); 亲自试一试 <script type="text/javascript" src="/jquery/jquery.js"></script> $...
• 4.4.htm 用else进行更多选择 • 4.5.htm if语句的嵌套之一 • 4.6.htm if语句的嵌套之二 • 4.7.htm switch语句 • 4.8.htm while循环语句 • 4.9.htm do-while...