jQuery实现滚动到底部时自动加载更多的方法示例

2018-02-19 09:52:20来源:作者:人点击

分享

本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考,具体如下:

这里利用AJAX,实现滚动到底加载数据功能:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <script src="js/jquery.min.js"></script>  <script type="text/javascript">    $(function () {      AddSth();    });    $(function () {      $(".main").unbind("scroll").bind("scroll", function (e) {        var sum = this.scrollHeight;        if (sum <= $(this).scrollTop() + $(this).height()) {          AddSth();        }      });    });    function AddSth() {      $.ajax({        type: 'POST',        url: "index.aspx/ReturnSth",        dataType: "json",        contentType: "application/json; charset=utf-8",        //data: "",        success: function (data) {          json = $.parseJSON(data.d);          for (var i in json) {            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";            $(".main").append(tbBody);          }          $(".main").append("<hr />");        }      });    }  </script></head><body>  <form id="form1" runat="server">    <div>下拉加载更多</div><br />    <div class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></div>  </form></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • 基于JQuery实现滚动到页面底端时自动加载更多信息
  • jquery 页面滚动到底部自动加载插件集合
  • 基于jquery实现页面滚动到底自动加载数据的功能
  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
  • jQuery实现的自动加载页面功能示例
  • javaScript和jQuery自动加载简单代码实现方法
  • jquery在启动页面时,自动加载数据的实例

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台