与我联系

ajax实现滚动条到底部后异步访问json获取数据

2015-10-20 一诺 js+jquery+ajax

当滚动条滚动的底部的时候通过ajax异步获取json数据demo实例

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax下拉获取数据</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <style type="text/css">
    /*简单样式重置*/
    * {margin: 0;padding: 0;}
    body {font-size: 12px;}
    p {margin: 5px;}
    .box {padding: 10px;}
    .loading{
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>
<body>
    <p>往下拉</p>
    <div id="resText">
    </div>
    <div class="loading">
      <img src="http://game.9g.com/rank/img/loading.gif" />
      正在玩命加载 ..
    </div>
  <!--   引入jQuery -->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script type="text/javascript">
    $(function() {
      // 开始加载几条,第一次从第几条开始加载 每次需要加载5条内容
      var num=10,st=0;
      // 判断是否还有数据
      var swit=true;
      var len=0;
      // 绑定页面滚动事件
      $(window).bind('scroll', function() {
        if(swit){
          show()
        }
      });
      function show() {
        // 是否到达页面底部
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
          ajaxRead();
        }
      }
      // ajax获取数据
      function ajaxRead() {
        var html = "";
        $.ajax({
          type: 'get',
          dataType: 'json',
          url: 'data.json',
          beforeSend: function() {
            console.log('loading...')
            $('.loading').show();
          },
          success: function(data) {
            var item=data.items;
            // 定义替换变量
            var num1=num;
            len=item.length;
            // 判断是否有数据
            if(st<=len){
              // 判断是否是最后几条
              if(parseInt((len-st)/num)<1){
                num1=len%num;
              }
              for(var i=st;i<st+num1;i++){
                html += '<div class="box">';
                html += '<h1>' + item[i].title + '</h1>';
                html += '<a hreft="' + item[i].link + '"><img src="' + item[i].media.m + '"/></a>'
                html += '<div>' + item[i].tags + '</div>';
                html += '</div>';
              }
              st+=num;
              $("#resText").append($(html));
            }else{
              $("#resText").append($("<p>已经没有数据了。。。</p>"));
                // 关闭开关
                swit=false;
            }
          },
          complete: function() {
            console.log('mission acomplete.')
            $('.loading').hide();
          }
        });
      }
      // 执行
      ajaxRead();
    })
  </script>
</body>
</html>



用来测试的data.json文件

{"items":[
  {
    "title":"北京上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"深圳上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"合肥上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"北京上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"上海上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"深圳上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"合肥上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"北京上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"上海上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"深圳上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"合肥上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"南京上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"六安上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"芜湖上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"杭州上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"苏州上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  },
  {
    "title":"成都上海微信测试",
    "link":"http://www.baidu.com",
    "media":{"m":"http://placehold.it/260x120"},
    "tags":"这是一个测试"
  }
]}


标签: ajax json

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog