使用MySQL数据进行无限滚动

我已经按照本主题中的帮助： 使用无限滚动w / MySQL数据库

并且已经接近让这个正常工作。 我有一个使用jquery masonry以块显示的页面，其中的块由来自mysql数据库的数据填充。 当我滚动到页面的末尾时，我成功地获得了loading.gif图像，但是在图像之后它立即显示“没有更多post显示”。 如果这是真的，它应该说什么。 我最初只在10-15个post中调用了5个post，所以当我到达页面底部时，其余的post应该加载但是当我真的没有更多的时候我会收到应该出现的消息post。

这是我的javascript：

var loading = false; $(window).scroll(function(){ if($(window).scrollTop() == $(document).height() - $(window).height()) { var h = $('.blockContainer').height(); var st = $(window).scrollTop(); var trigger = h - 250; if((st >= 0.2*h) && (!loading) && (h > 500)){ loading = true; $('div#ajaxLoader').html(''); $('div#ajaxLoader').show(); $.ajax({ url: "blocks.php?lastid=" + $(".masonryBlock:last").attr("id"), success: function(html){ if(html){ $(".blockContainer").append(html); $('div#ajaxLoader').hide(); }else{ $('div#ajaxLoader').html('No more posts to show.'); } } }); } } }); 

这是块实际上在页面上的php。 此页面最初发布数据库中的5个项目。 javascript抓取最后发布的id并通过ajax将其发送到blocks.php脚本，然后使用最后发布的id从数据库中获取其余项目。

 $allPosts = $link->query("/*qc=on*/SELECT * FROM all_posts ORDER BY post_id DESC LIMIT 5"); while($allRows = mysqli_fetch_assoc($allPosts)) { $postID = $link->real_escape_string(intval($allRows['post_id'])); $isBlog = $link->real_escape_string(intval($allRows['blog'])); $isJob = $link->real_escape_string(intval($allRows['job'])); $isVid = $link->real_escape_string(intval($allRows['video'])); $itemID = $link->real_escape_string(intval($allRows['item_id'])); if($isBlog === '1') { $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC"; $result = $link->query($query); while($blogRow = mysqli_fetch_assoc($result)) { $blogID = $link->real_escape_string($blogRow['blog_id']); $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title'])); $blogDate = $blogRow['pub_date']; $blogPhoto = $link->real_escape_string($blogRow['image']); $blogAuthor = $link->real_escape_string($blowRow['author']); $blogContent = $link->real_escape_string($blogRow['content']); //clean up the text $blogTitle = stripslashes($blogTitle); $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150))); echo "
"; echo ""; echo "
"; echo "".$blogTitle.""; echo "
".$blogContent."
"; echo ""; echo "
"; } } 

这是AJAX调用的blocks.php脚本中的php：

 //if there is a query in the URL if(isset($_GET['lastid'])) { //get the starting ID from the URL $startID = $link->real_escape_string(intval($_GET['lastid'])); //make the query, querying 25 fields per run $result = $link->query("SELECT * FROM all_posts ORDER BY post_id DESC LIMIT '".$startID."', 25"); $html = ''; //put the table rows into variables while($allRows = mysqli_fetch_assoc($result)) { $postID = $link->real_escape_string(intval($allRows['post_id'])); $isBlog = $link->real_escape_string(intval($allRows['blog'])); $isJob = $link->real_escape_string(intval($allRows['job'])); $isVid = $link->real_escape_string(intval($allRows['video'])); $itemID = $link->real_escape_string(intval($allRows['item_id'])); //if the entry is a blog if($isBlog === '1') { $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC"; $result = $link->query($query); while($blogRow = mysqli_fetch_assoc($result)) { $blogID = $link->real_escape_string($blogRow['blog_id']); $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title'])); $blogDate = $blogRow['pub_date']; $blogPhoto = $link->real_escape_string($blogRow['image']); $blogAuthor = $link->real_escape_string($blowRow['author']); $blogContent = $link->real_escape_string($blogRow['content']); $blogTitle = stripslashes($blogTitle); $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150))); $html .="
  
 ".$blogTitle." 
".$blogContent."
 
"; } } echo $html; } 

我曾尝试使用jquery无限滚动插件，但这样做似乎要困难得多。 我不知道这里的问题是什么。 我已经添加了警报并进行了测试，javascript脚本正在完全处理，所以必须使用blocks.php吗？

编辑：我通过将sql查询更改为SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15 ，对此问题进行了临时修复SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15

这些块现在通过ajax加载，但是它们一次只加载一个块。 ajax正在发送每个块的请求，它们一个接一个地消失，是否可以使用jquery砌体使它们全部淡入？

Answer 1

我在另一个答案中看到了你的代码，我建议在MySql中使用LIMITfunction而不是偏移值。 例：

 SELECT * FROM all_posts ORDER BY post_id DESC LIMIT '".(((int)$page)*5)."',5 

这只会在AJAX请求中获取页码并自动获取偏移量。 这是一个一致的查询，并且独立于页面上的最后结果。 在jQuery代码中发送类似page = 1或page = 2的内容。 这可以通过几种不同的方式完成。

首先，计算页面上构造的元素数量，并除以页面上的数字。 这将产生页码。

其次，您可以使用jQuery并将当前页码绑定到正文：

 $(body).data('page', 1) 

每页加载一次。

这样做真的是更好的方法，因为它对所有操作使用一个查询，并且不需要有关页面上已有数据的大量信息。

唯一需要注意的是，这个逻辑要求第一页请求为0而不是1.这是因为1 * 5将评估为5，跳过前5行。 如果为0，则将评估为0 * 5并跳过前0行（因为0 * 5为0）。

如有任何问题请与我联系！

Answer 2

你试过调试吗？

如果您还没有使用，我建议您使用firebug插件。

ajax调用是否返回空？ 如果是，请尝试回显sql并validation这是否是正确的语句，并且所有变量都包含预期的信息。 考虑到客户端，服务器和数据库之间发生了很多通信，很多事情都可能失败。

在回复您的评论时，您在这段代码中添加了html：

 if(html){ $(".blockContainer").append(html); $('div#ajaxLoader').hide(); } 

我会在if语句之前做一个console.log（html）和console.log（$（“。blockContainer”）。length） 。