代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > ajax技巧 > ajax实现页面底部下拉加载数据功能源码示例

ajax实现页面底部下拉加载数据功能源码示例

ajax技巧 围观1584次 更新日期:2017-07-18 12:52:52 留下足迹

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合json是如何实现的吧。

当然本例子采用的是jquery库,后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。

首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height();

再给window绑定scroll事件。所以整个页面demo可以这样做:

  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <style type="text/css"> 
  5. * { margin:0; padding:0;} 
  6. body { font-size:12px;} 
  7. p{ margin: 5px;} 
  8. .box{ padding: 10px;} 
  9. </style> 
  10. <!-- 引入jQuery --> 
  11. <script src="http://www.uxuew.cn/statics/js/lmphp/jquery-1.8.3.min.js" type="text/javascript"></script> 
  12. <script type="text/javascript"> 
  13. $(function(){ 
  14. $(window).bind('scroll',function(){show()}); 
  15. function show(){ 
  16. if($(window).scrollTop()+$(window).height()>=$(document).height()){ 
  17. ajaxRead(); 
  18. function ajaxRead(){ 
  19. var html=""
  20. $.ajax({ 
  21. type:'get', 
  22. dataType:'jsonp', 
  23. url:'http://www.uxuew.cn/?tags=car&tagmode=any&format=json', 
  24. beforeSend:function(){console.log('loading...')}, 
  25. success:function(data){ 
  26. $.each(data.items,function(i,item){ 
  27. html+='<div class="box">'; 
  28. html+='<h1>'+item.title+'</h1>'; 
  29. html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>
  30. html+='<div>'+item.tags+'</div>'; 
  31. html+='</div>'; 
  32. }); 
  33. $("#resText").append($(html)); 
  34. }, 
  35. complete:function(){console.log('mission acomplete.')} 
  36. }); 
  37. }) 
  38. </script> 
  39. </head> 
  40. <body> 
  41. <ul> 
  42.  <li>列表数据(底部上拉加载)</li> 
  43. <li>列表数据(底部上拉加载)</li> 
  44. <li>列表数据(底部上拉加载)</li> 
  45. <li>列表数据(底部上拉加载)</li> 
  46. <li>列表数据(底部上拉加载)</li> 
  47. </ul> 
  48. <div id="resText" > 
  49. </div> 
  50. </body> 
  51. </html> 

拉到底部就是实现异步数据加载了,当然了,实际项目要比这复杂一点,本文仅介绍一下ajax实现原理。

转载请注明:代码学堂>web前端 > ajax技巧 > ajax实现页面底部下拉加载数据功能源码示例

喜欢 (148) or 分享 (300)