<code>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<style type="text/css">
.con{
border-style: solid;
border-color: red;
width: 500px;
height: 350px;
}
</style>
<div id="add">
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
</div>
<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>
----------
test.php
<?php echo '测试内容';</code></code>登入後複製
登入後複製
回复内容：
<code>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<style type="text/css">
.con{
border-style: solid;
border-color: red;
width: 500px;
height: 350px;
}
</style>
<div id="add">
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
</div>
<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>
----------
test.php
<?php echo '测试内容';</code></code>登入後複製
登入後複製
1）不清除你的不能加载了是个什么样的状况~~
2）从代码上看，是有问题的
<code>* 因为ajax是个异步请求，那么当你第1次滚动到底部，发送了ajax请求还没有回来数据的时候，你上拉下再滚动到底部，又会触发一次scroll事件。也就是说如果你的ajax请求实际时间长，并在次工程中反复的滚动页面，ajax请求会越积越多~~。解决方法为当前一次ajax请求回来后在允许相应下一次scroll事件
* 既然使用了jQuery,为什么不把JS放在```$(function(){})```documentonready回调中呢
* style为什么不放在head标签里
</code>登入後複製
<code>
<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+'');
}
}());
//滚动处理函数
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>
<div id="add">
<div class="con">
测试内容1
</div>
<div class="con">
测试内容2
</div>
<div class="con">
测试内容3
</div>
</div>
</code>登入後複製
我测试了你的代码，只修改了jquery和ajax部分，在chrome下没有问题：
![javascript - 高手大牛给我看看，拉动到最后怎么不加载了]()
我在ajax结果中，加了索引：
![javascript - 高手大牛给我看看，拉动到最后怎么不加载了]()
你在什么环境测试的呢？
<code>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.con{
border-style: solid;
border-color: red;
width: 500px;
height: 220px;
}
</style>
<div id="add">
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
</div>
<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++ + ''); //追加进id为add的class
}
});
}
});
</script>
----------
test.php
<?php echo '测试内容';
</code></code>登入後複製
