本文实例讲述了 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 选择器用法总结
来源: http://www.jb51.net/article/135139.htm