`
freejsnet
  • 浏览: 1607 次
文章分类
社区版块
存档分类
最新评论

Ajax点击后载入更多在本页,无刷新

 
阅读更多

Ajax点击后载入更多在本页,无刷新.

本例是分页的另外一种显示方式,并不是隐藏未显示的内容

数据库结构与《ajax 翻页》是一样的

Ajax点击后载入更多在本页,无刷新

 

 js代码

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.   
  4.     var track_click = 0; //track user click on "load more" button, righ now it is 0 click  
  5.       
  6.     var total_pages = <?php echo $total_pages; ?>;  
  7.     $('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load  
  8.   
  9.     $(".load_more").click(function (e) { //user clicks on button  
  10.       
  11.         $(this).hide(); //hide load more button on click  
  12.         $('.animation_image').show(); //show loading image  
  13.   
  14.         if(track_click <= total_pages) //make sure user clicks are still less than total pages  
  15.         {  
  16.             //post page number and load returned data into result element  
  17.             $.post('fetch_pages.php',{'page': track_click}, function(data) {  
  18.               
  19.                 $(".load_more").show(); //bring back load more button  
  20.                   
  21.                 $("#results").append(data); //append data received from server  
  22.                   
  23.                 //scroll page to button element  
  24.                 $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);  
  25.                   
  26.                 //hide loading image  
  27.                 $('.animation_image').hide(); //hide loading image once data is received  
  28.       
  29.                 track_click++; //user click increment on load button  
  30.               
  31.             }).fail(function(xhr, ajaxOptions, thrownError) {   
  32.                 alert(thrownError); //alert any HTTP error  
  33.                 $(".load_more").show(); //bring back load more button  
  34.                 $('.animation_image').hide(); //hide loading image once data is received  
  35.             });  
  36.               
  37.               
  38.             if(track_click >= total_pages-1)  
  39.             {  
  40.                 //reached end of the page yet? disable load button  
  41.                 $(".load_more").attr("disabled""disabled");  
  42.             }  
  43.          }  
  44.             
  45.         });  
  46. });  
  47. </script>  

 主要代码

 

XML/HTML Code复制内容到剪贴板
  1. <div id="results"></div>  
  2.   
  3. <div align="center">  
  4. <button class="load_more" id="load_more_button">load More</button>  
  5. <div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>  
  6. </div>  

 fetch_pages.php

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. include("conn.php");  
  3. $item_per_page = 3;  
  4. //sanitize post value  
  5. $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);  
  6.   
  7. //throw HTTP error if page number is not valid  
  8. if(!is_numeric($page_number)){  
  9.     header('HTTP/1.1 500 Invalid page number!');  
  10.     exit();  
  11. }  
  12.   
  13. //get current starting point of records  
  14. $position = ($page_number * $item_per_page);  
  15.   
  16. //Limit our results within a specified range.   
  17. $results = mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page");  
  18.   
  19. //output results from database  
  20. echo '<ul class="page_result">';  
  21. while($row = mysql_fetch_array($results))  
  22. {  
  23.     echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';  
  24. }  
  25. echo '</ul>';  
  26. ?>  

 


原文地址:http://www.freejs.net/article_fenye_16.html

0
1
分享到:
评论

相关推荐

    基于ajax实现点击加载更多无刷新载入到本页

    本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与《ajax 翻页》是一样的 JavaScript 代码 [removed] $(document).ready(function() { var track_click = ; //track user click on "load more" ...

    juqery+asp无刷新加载更多

    原理:页面载入时,jQuery向后台请求数据,ASP程序通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台ASP程序接收请求参数,并作出相应,...

    ASP+jQuery+JSON无刷新加载更多内容

    ASP+jQuery+JSON无刷新加载更多内容,我们在一些腾讯网站评论栏目上可以看到这样的应用,列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“加载更多”来查看...

    php+jquery+html实现点击不刷新加载更多的实例代码

    基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,...

    7384迷你广告信息发布系统 V2.8.rar

    运行环境: ASP/Access ...7.已对页脚以及搜索等部件用SUB调用方便修改,更多体验请下载测试或者访问展示网址。 前台和后台帐号admin@ewuyi.net 密码253252545 使用前请修改config.asp的各项参数,使用方正常

    KODExplorer 芒果云-资源管理器

    - 更多场景等你来挖掘!…… #### 3.使用说明 管理员: admin/admin 普通用户:demo/demo 游客用户:guest/guest [如何使用] 下载程序,解压上传到你的服务器路径下,data目录设置777权限。访问体验超便捷的服务...

    大名鼎鼎SWFUpload- Flash+JS 上传

     * 类似AJAX的无刷新上传;  * 可以显示上传进度;  * 良好的浏览器兼容性;  * 兼容其他JavaScript库 (例如:jQuery, Prototype等);  * 支持Flash 8和Flash 9;  SWFUpload不同于其他基于Flash构建的上传...

    jQuery详细教程

    您将在本教程下面的章节学习更多有关 callback 参数的知识。 实例 $("button").click(function(){ $("p").hide(1000); }); 亲自试一试 &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; $...

    精通JavaScript

    • 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...

Global site tag (gtag.js) - Google Analytics