AJAX函数无法通过滚动工作

使用AJAX进行无限滚动。 内容仅在第一次加载，但不会通过滚动加载。

怎么了？

jQuery的：

function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('
'); $('#posts').html(data); } }); } loadFeed(); $(window).scroll(function () { var windowScroll = $(window).scrollTop(); var windowHeight = $(window).height(); var documentHeight = $(document).height(); if ((windowScroll + windowHeight) == documentHeight) { loadFeed(); } }); 

loadmore.php：

 getMessage(); } } ?>  prepare("SELECT title FROM books WHERE id = :id ORDER BY date DESC"); $title_select_query ->execute(array(':id' => $id)); $title_select_query_result = $title_select_query->fetchColumn(); echo($title_select_query_result); $title_select_query_result = $title_select_query->fetchColumn(); echo($title_select_query_result); $title_select_query_result = $title_select_query->fetchColumn(); echo($title_select_query_result); $title_select_query_result = $title_select_query->fetchColumn(); echo($title_select_query_result); $title_select_query_result = $title_select_query->fetchColumn(); echo($title_select_query_result); ?> 

Answer 1

因为你替换了$（’＃posts’）的内容，所以在scroll =>上的第一个ajax请求之后文档的高度不会改变，所以你需要向上滚动，然后再次向下滚动以触发另一个ajax请求。 因为我不知道预期的页面布局，我将给出一个简单的基本演示HTML JSFiddle演示

JavaScript的

 var loadmoore = true, loaded_posts =0 ; function gent_sample_data(num_posts){ var i, sample_data = ''; for(i=0;i"; } return sample_data; } function loadFeed(){ // generate sample data var sample_data = gent_sample_data(15); loaded_posts = loaded_posts + 15; $.ajax({ url : '/echo/html/', dataType: 'html', type: 'post', data: {'html':sample_data}, success: function(returnhtml){ console.log(returnhtml); // option 1 - add result into "havanaglia" div // var $post = $('
'); // $post.html(returnhtml); // $("#posts").append($post); // option 2 - ad result after "havanaglia" div $("#posts").append('
'); $("#posts").append(returnhtml); loadmoore = true; } }); } loadFeed(); $("#main").scroll(function () { if (loadmoore && $("main").scrollTop() >= ($("main").height()-100) ) { loadmoore = false; loadFeed(); } }); 

对于你的情况，我建议使用这样的东西：

 var loadmoore= true; function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { var $havanaglia = $('
'); $havanaglia.html(data); $("#posts").append($havanaglia); loadmoore = true; } }); } loadFeed(); $(window).scroll(function () { if (loadmoore && $(window).scrollTop() >= $(document).height() - $(window).height()-100) { loadmoore= false; loadFeed(); } }); 

为了防止从数据库中获取相同的post，我建议发送到php的最后加载post的ID /号码以获取id / number>最后加载post的post

Answer 2

如果要为每个滚动事件加载AJAX函数，则无需检查条件是否if 。 简单地写..

 $(window).scroll(function(){ loadFeed(); }); 

如果要调用AJAX函数，如果滚动到达底部，则必须检查条件，如…

 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ loadFeed(); } }); 

Answer 3

改变你的loadFeed()function

 function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('
'); $('#posts').html($('#posts').html()+data); } }); } 

这是你必须做的改变$('#posts').html($('#posts').html()+data);

Answer 4

如果我没记错的话，我遇到了类似的问题。 我做的是停止滚动侦听器并在AJAX成功时重新启动它。

这是可以帮助您的代码：

 function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('
'); $('#posts').html(data); $(window).on('scroll', function() {checkScroll()}); // Run the function again upon success } }); } var checkScroll = function() { if ($('#SomeElementAlwaysAtTheBottomOfThePage')[0]) { var el = $('#SomeElementAlwaysAtTheBottomOfThePage'); var bottom_of_object = el.offset().top + el.outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if (bottom_of_window >= bottom_of_object) { // If we're at the bottom... $(window).unbind('scroll'); // Stop the scroll function loadFeed(); // Load the AJAX } } } $(window).on('scroll', function() {checkScroll()}); // Start the function off 

Answer 5

看起来你用html()函数覆盖了元素#posts的内部内容。 $("#posts").append('

'); $('#posts').html(data);

我想你想要$("#posts").append($('

').html(data));

关于你的IF语句if ((windowScroll + windowHeight) == documentHeight) ，只有当你从页面的顶部滚动到底部（在Chrome上）时才会调用你的ajax函数。

Answer 6

当滚动条点击屏幕底部时，以下javascript代码用于加载4条记录。 这意味着当第一次获取4条记录时，第二次接下来4条记录被提取，这些所有记录将显示在屏幕上。 此代码可帮助我们减少页面加载时的负载延迟。

 $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { //alert("bottom!"); loadNext(); } }); var n1=0; var n2=4; function loadFirst() { var n1=0; var n2=4; } function loadNext() { n1=n1+4; n2=n2+4; //alert(n1); //alert(n2); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("testidiv").innerHTML=document.getElementById("testidiv").innerHTML+xmlhttp.responseText; } } xmlhttp.open("GET","next_testimonial_action.php?a=" + n1 + "&b=" + n2,true); xmlhttp.send(); }  

“next_testimonial_action.php？a =”+ n1 +“＆b =”+ n2“是包含从db获取数据的逻辑的php页面，n1，n2是要获取的记录的限制。如果需要php您可以请求评论文件。谢谢

—-重要—-“你必须在bodyOnload或document.ready（）jquery上调用loadFirst（）函数”

Answer 7

一切看起来都不错，

只需更改$(window).scroll(function () {...... to

 $(document).on( 'scroll','window', function(){ //or $(document).on( 'scroll','id of div containing scroll', var windowScroll = $(window).scrollTop(); var windowHeight = $(window).height(); var documentHeight = $(document).height(); if ((windowScroll + windowHeight) == documentHeight) { loadFeed(); } }); 

Answer 8

 function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('
'); $('#posts').html(data); $(window).on('scroll', function() {checkScroll()}); // Run the function again upon success } }); } var checkScroll = function() { if ($('#SomeElementAlwaysAtTheBottomOfThePage')[0]) { var el = $('#SomeElementAlwaysAtTheBottomOfThePage'); var bottom_of_object = el.offset().top + el.outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if (bottom_of_window >= bottom_of_object) { // If we're at the bottom... $(window).unbind('scroll'); // Stop the scroll function loadFeed(); // Load the AJAX } } } $(window).on('scroll', function() {checkScroll()}); // Start the function off