高手大牛给我看看，拉动到最后怎么不加载了

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
    </head>
    <style type="text/css">
        .con{
            border-style: solid;
            border-color: red;
            width: 500px;
            height: 350px;
        }
    </style>
    <body>
    <div id="add">
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
    </div>
    </body>
    <script>
        $(window).scroll(function(){
    　　var scrollTop = $(this).scrollTop(); //获取、判断高度
    　　var scrollHeight = $(document).height();
    　　var windowHeight = $(this).height();
    　　if(scrollTop + windowHeight == scrollHeight){
    　　　　alert("已经到最底部了！");
                    //如果不懂ajax的话可以去熟悉一下
                    $.ajax({
                                type: "GET", //提交方式 GET 或 POST
                                url: "test.php", //提交的php脚本
                                data: {
                                    username:$("#username").val(),  //提交的数据可以为空
                                    content:$("#content").val()
                                },
                                dataType: "html", //返回的类型 还可以是 json格式
                                success: function(data){ //成功后返回的数据
                                    
                                        //这里可以对data进行处理
                                    $('#add').append(data); //追加进id为add的class
                                }
                            });
    　　}
    });
    </script>
</html>


----------

test.php

<?php
echo '测试内容';

javascript php

mysql

阅读 2.4k

2 个回答

得票最新

kikong

19.1k31320

发布于
2015-12-05

1）不清除你的不能加载了是个什么样的状况~~
2）从代码上看，是有问题的

* 因为ajax是个异步请求，那么当你第1次滚动到底部，发送了ajax请求还没有回来数据的时候，你上拉下再滚动到底部，又会触发一次scroll事件。也就是说如果你的ajax请求实际时间长，并在次工程中反复的滚动页面，ajax请求会越积越多~~。解决方法为当前一次ajax请求回来后在允许相应下一次scroll事件
* 既然使用了jQuery,为什么不把JS放在```$(function(){})```documentonready回调中呢
* style为什么不放在head标签里

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <style type="text/css">
        .con{
            border-style: solid;
            border-color: red;
            width: 500px;
            height: 350px;
        }
    </style>
    <script>
        $(function(){

            //添加内容
            var appendNewDiv=(function(){
                var currentLength=$('div#add div.class').length;
                return function(){
                    currentLength++;
                    //追加进id为add的class
                    $('#add').append('<div class="con">测试内容'+currentLength+'</div>'); 
                }
            }());

            //滚动处理函数
            var loadingNewDiv=(function(){
                var isLoadingFlag=false;
                return function(){
                    if(isLoadingFlag){//页面已经在loading加载数据了，那么此次scroll事件就忽略
                        return;
                    }
                    var scrollTop = $(this).scrollTop(); //获取、判断高度
                    var scrollHeight = $(document).height();
                    var windowHeight = $(this).height();
                    if(scrollTop + windowHeight == scrollHeight){
                        console.log("已经到最底部了！");
                        //代替ajax请求，实现相同的效果
                        setTimeout(function(){
                            appendNewDiv();
                            isLoadingFlag=false;//标识数据已经加载完毕，可以触发下一个scroll
                        },2000)
                    }
                };
            }());
            
            $(window).scroll(function(){
                loadingNewDiv.apply(this,Array.prototype.slice(arguments,0));
            });
        });

    </script>
</head>
<body>
<div id="add">
    <div class="con">
        测试内容1
    </div>
    <div class="con">
        测试内容2
    </div>
    <div class="con">
        测试内容3
    </div>
</div>
</body>
</html>

Ewellyuan

1.3k115

发布于
2015-12-04

我测试了你的代码，只修改了jquery和ajax部分，在chrome下没有问题：
滚动前
我在ajax结果中，加了索引：
滚动后
你在什么环境测试的呢？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <style type="text/css">
        .con{
            border-style: solid;
            border-color: red;
            width: 500px;
            height: 220px;
        }
    </style>
    <body>
    <div id="add">
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
    </div>
    </body>
    <script>
        var index = 1;
        $(window).scroll(function(){
    　　var scrollTop = $(this).scrollTop(); //获取、判断高度
    　　var scrollHeight = $(document).height();
    　　var windowHeight = $(this).height();
    　　if(scrollTop + windowHeight == scrollHeight){
    　　　　alert("已经到最底部了！");
                    //如果不懂ajax的话可以去熟悉一下
                    $.ajax({
                                type: "GET", //提交方式 GET 或 POST
                                url: "Test.php", //提交的php脚本
                                data: {
                                    username:$("#username").val(),  //提交的数据可以为空
                                    content:$("#content").val()
                                },
                                dataType: "html", //返回的类型 还可以是 json格式
                                success: function(data){ //成功后返回的数据
                                        //这里可以对data进行处理
                                    $('#add').append('<div class="con">测试内容' + index++ + '</div>'); //追加进id为add的class
                                }
                            });
    　　}
    });
    </script>
</html>


----------

test.php

<?php
echo '测试内容';

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

高手大牛给我看看，拉动到最后怎么不加载了

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

我们知道MySQL字段可以存放纯文本，但是富文本有图片，有标题样式等情况，一般是怎么进行存储的呢？

为什么会出现CORS error？