• 滑轮滚动到页面底部ajax加载数据的实例


    滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷。

    当然本例子采用的是jquery库,后期会做成原生js。

    本例的数据调用的是锋利的jquery一书提供的一段json。

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
     * { margin:0; padding:0;}
     body { font-size:12px;}
     p{ margin: 5px;}
     .box{ padding: 10px;}
     </style>
      <!--   引入jQuery -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     $(function(){
         $(window).bind('scroll',function(){show()});
     
         function show()
         {
     
             if($(window).scrollTop()+$(window).height()>=$(document).height())
             {
                 ajaxRead();
             }
         }
         
         function ajaxRead()
         {
     
             var html="";
             $.ajax({
                   type:'get',
                   dataType:'jsonp',
                   url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',
                   beforeSend:function(){console.log('loading...')},
                   success:function(data){
                                 $.each(data.items,function(i,item){
                                       
                                        html+='<div class="box">';
                                        html+='<h1>'+item.title+'</h1>';
                                        html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'
                                        html+='<div>'+item.tags+'</div>';
                                        html+='</div>';
     
                                 });
                                 $("#resText").append($(html));
                   },
                   complete:function(){console.log('mission acomplete.')}
     
             });
         }
     })
     </script>
     </head>
     <body>
     <p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p>
      <div id="resText" >
           
      </div>
     
     </body>
     </html>

    拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。

    转自:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html

  • 相关阅读:
    求数组中最大子数组的和(二维环)
    《梦断代码》读书笔记 第3篇
    求数组中最大子数组的和(1000)
    求数组中最大子数组的和(环)
    电梯调度1
    求数组中最大子数组的和(二维)
    读书笔记之反思篇
    二维数组求最大子数组
    结对开发~环形数组篇
    结对开发 ~挑战来了
  • 原文地址:https://www.cnblogs.com/dkwlxq/p/3075619.html
Copyright © 2020-2023  润新知