从数据库加载更多项目~Infinite Scroll

我是ajax / php的新手，所以我想找出最好的方法。

我有一个sql数据库填充1500项，我加载到我的页面。 我想在页面中加载30个项目，然后当用户到达我希望它的网页底部然后加载另外30个项目。

到目前为止，我的网页上显示了30个项目，其中有一个下拉菜单可以过滤项目。 我还有一个当用户到达页面底部时触发的函数。

谁能帮助我使用PHP脚本来完成这项工作并加载更多项目？ 我正在使用的代码如下。

谢谢

HTML

  show all 323 266 277 289  
  
 
<img src="https://stackoverflow.com/questions/11878365/loading-more-items-from-database-infinite-scroll//ajax_load.gif" alt="loading..." />
 
 
<img src="https://stackoverflow.com/questions/11878365/loading-more-items-from-database-infinite-scroll//ajax_load.gif" alt="loading..." />
 

jQuery的

 $(document).ready(function () { loadData(); //Hide Loader for Infinite Scroll $('div.ajaxloader').hide(); }); function loadData () { //Show Loader for main content $('#entries .ajaxloader').show(); //Pull in data from database if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari "use strict"; 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("entries").innerHTML=xmlhttp.responseText; //Fire filter function once data loaded filterEntries(); //Hide Loader for main content once loaded $('#entries .ajaxloader').hide(); } } xmlhttp.open("POST","https://stackoverflow.com/questions/11878365/loading-more-items-from-database-infinite-scroll//getentries.php?$number",true); xmlhttp.send(); }; //Isotope filter function filterEntries () { var $container = $('#entries'); $select = $('#filters select'); $container.isotope({ itemSelector : '.item' }); $select.change(function() { var filters = $(this).val(); $container.isotope({ filter: filters }); }); }; $(window).scroll(function () { if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { $('div.ajaxloader').show('slow'); //alert("Function to load more entries"); } }); 

PHP

 <?php //Connect to Database $con = mysql_connect("localhost", "root", "root"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("awards", $con); $sql="SELECT * FROM entry WHERE status = 'registered' ORDER BY `entry_id` LIMIT 0, 30"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { //Get award cat ids $awardcat = $row['awards_subcategory_id'] ; print "
";//add award cat id to each div print ''; print "
 Studio: " . $row['studio'] . "
"; print "
 Client: " . $row['client'] . "
"; print "
 Description: " . $row['description'] . "
"; print "
 Solution Process: " . $row['solution_process'] . "
"; print "
"; } mysql_close($con); ?> 

Answer 1

这是一个非常复杂的问题。 在尝试从头编写自己的变体之前，我建议你看一下Infinite Scroll jQuery插件 。 如果这不能解决问题，这是一个可能的解决方案：

使用Javascript

 $(document).ready(function () { loadData( 0 ); //Hide Loader for Infinite Scroll $('div.ajaxloader').hide(); }); function loadData ( last_id ) { var $entries = $('#entries'), $loader = $('.ajaxloader', $entries).show(); $.get( '/getentries.php', { last_id : last_id }, function( data ) { $entries.append( data ).append( $loader.hide() ); filterEntries(); }); }; //Isotope filter - no changes to this code so I didn't include it $(window).scroll(function () { if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { $('div.ajaxloader').show('slow'); loadData( $( '#entries item:last' ).data('id') ) } }); 

PHP

 connect_errno ) { die( 'Could not connect:' . $con->connect_error ); } $last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : 0; $stmt = $con->prepare( 'SELECT * FROM entry WHERE status = "registered" AND entry_id > (?) ORDER BY entry_id LIMIT 0, 30' ); $stmt->bind_param( 'i', $last_id ); $stmt->execute(); $result = $stmt->get_result(); while( $row = $result->fetch_assoc() ) { //Get award cat ids $awardcat = $row['awards_subcategory_id']; print "
";//add award cat id to each div print ''; print "
 Studio: " . $row['studio'] . "
"; print "
 Client: " . $row['client'] . "
"; print "
 Description: " . $row['description'] . "
"; print "
 Solution Process: " . $row['solution_process'] . "
"; print "
"; } $con->close(); 

Javascript代码向php脚本发送一个AJAX GET请求，其中包含列表中显示的最后一个条目的id。 然后，PHP脚本返回该id之后的30个条目。 原始的Javascript文件中有一些PHP代码。 我删除了它，因为我不知道它的目的是什么（你是从PHP脚本输出JS吗？）。 此外，整个XMLHttpRequest代码可以缩短为$.get()函数。 无论如何你都在使用jQuery，所以你不需要重新发明轮子。 我使用data-id属性来传输条目ID。 这是HTML5特定属性。 如果您不想使用它，只需使用id ，但请记住，ID不能以数字开头 – 您应该在前面添加一个字母。

在PHP脚本中，我使用了mysqli而不是mysql_*函数。 从现在开始你应该使用mysqli或PDO ，因为它们比（现已弃用的） mysql_*更可靠和安全。 您的PHP安装很可能已包含这些扩展。 请注意，我没有处理数据库查询错误。 您可以自己编写该代码。 如果您遇到其他类型的错误，请在此处发布，我会尝试修复它们。