我有一个页面的结果在我的网站上,我使用AJAX返回更多的结果时向下滚动,我的问题是,然而,因为它拉的结果,它似乎拉相同的多次?我不知道是什么原因造成的,有人能看出我做错了什么吗?
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var number = $(".directory").children().length;
$.ajax({
type: "POST",
url: "getentries.php",
data: "count="+number,
success: function(results){
$('.directory').append(results);
}
});
} else {}
});
PHP $result = mysql_query("SELECT * FROM directory LIMIT {$_POST['count']},12");
$c = 1;
while($row = mysql_fetch_array($result))
{
echo '<div class="entry';
if (($c % 4) == 1) echo ' alpha ';
echo 'ALL THE DATA IS GOING HERE';
$c++;
}
问题很可能是在滚动时触发了多个ajax调用。像这样设置一个定时事件侦听器:
didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
setInterval(function() {
if ( didScroll ) {
didScroll = false;
if(($(document).height() - $(window).height()) - $(window).scrollTop() < 100) {
// load more results
}
}
}, 250);
这篇文章解释了为什么你的解决方案是一个坏主意:http://ejohn.org/blog/learning-from-twitter/
所以问题是,一旦达到滚动阈值,就会多次调用ajax。您需要在第一个ajax调用上添加一个标志,以便在ajax调用完成之前不会再次调用它。
ajaxInProgress = false;
if (!ajaxInProgress && ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)) {
ajaxInProgress = true;
$.ajax({
type: "POST",
url: "getentries.php",
data: "count="+number,
success: function(results){
ajaxInProgress = false;
$('.directory').append(results);
}
});
}
问题在于如何通过ajax调用传递数据。在Jquery文档中,您需要在data中的javascript对象中放入count和amount:
$.ajax({
type: "POST",
url: "getentries.php",
data: {count: number},
success: function(results){
$('.directory').append(results);
}
});
一旦你解决了这个问题,你的Mysql查询应该返回正确的下一个数据块到你的视图。
希望这对你有帮助!