Php 正在从数据库加载更多项目~Infinite Scroll
我是ajax/php新手,所以我试图找出实现这一点的最佳方法 我有一个sql数据库填充1500个项目,我正在加载到我的页面中。我想将30个项目加载到页面中,然后当用户到达网页底部时,我希望它再加载30个项目 到目前为止,我已经在我的网页上显示了30个项目,带有一个下拉菜单来过滤这些项目。我还有一个函数,当用户到达页面底部时触发 有人能帮我使用PHP脚本来完成这项工作并加载更多项目吗?下面是我正在使用的代码 谢谢 HTML Jquery PHPPhp 正在从数据库加载更多项目~Infinite Scroll,php,jquery,mysql,ajax,infinite-scroll,Php,Jquery,Mysql,Ajax,Infinite Scroll,我是ajax/php新手,所以我试图找出实现这一点的最佳方法 我有一个sql数据库填充1500个项目,我正在加载到我的页面中。我想将30个项目加载到页面中,然后当用户到达网页底部时,我希望它再加载30个项目 到目前为止,我已经在我的网页上显示了30个项目,带有一个下拉菜单来过滤这些项目。我还有一个函数,当用户到达页面底部时触发 有人能帮我使用PHP脚本来完成这项工作并加载更多项目吗?下面是我正在使用的代码 谢谢 HTML Jquery PHP 这是一个相当复杂的问题。在尝试从头开始编写您自己的变
这是一个相当复杂的问题。在尝试从头开始编写您自己的变体之前,我建议您先看看。如果这不能解决问题,这里有一个可能的解决方案: Javascript PHP Javascript代码向php脚本发送一个AJAX GET请求,其中包含列表中显示的最后一个条目的id。然后,PHP脚本返回该id之后的30个条目。原始Javascript文件中有一些PHP代码。我删除了它,因为我不知道它的用途是什么,你是从PHP脚本输出JS吗?。另外,整个XMLHttpRequest代码可以缩短为$.get函数。无论如何,您都在使用jQuery,因此不需要重新发明轮子。我使用数据id属性来传输条目id。这是HTML5特有的属性。如果您不想使用它,只需使用id即可,但请记住id不能以数字开头-您应该以字母作为前缀
在PHP脚本中,我使用了mysqli而不是mysql_*函数。从现在起,您应该使用mysqli或PDO,因为它们比现在不推荐使用的mysql_*更可靠、更安全。您的PHP安装很可能已经包含了这些扩展。请注意,我没有处理数据库查询错误。你可以自己编写代码。如果您遇到其他类型的错误,请将其发布到此处,我将尝试修复它们。从代码中获取此错误,我似乎无法修复-get 500内部服务器错误jquery-1.8.0.js行8214错误似乎是由调用未定义的方法mysqli_stmt::get_result引起的–知道如何修复它吗?研究人员说,我没有合适的PHP/或驱动程序来工作。如果数据需要按不同的列甚至一组列进行排序,该怎么办?那么lastId部分就没有意义了。如何处理这种情况?
<section id="filters">
<select name="entries" onchange="filterEntries()">
<option value="*">show all</option>
<option value=".item323">323</option>
<option value=".item266">266</option>
<option value=".item277">277</option>
<option value=".item289">289</option>
</select>
</section> <!-- #filters -->
<div id="entries" class="clearfix">
<div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->
</div><!--entries-->
<div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->
$(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","<?php bloginfo('template_url'); ?>/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
//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 "<div class='item item$awardcat clearfix'>";//add award cat id to each div
print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
print "<p > Studio: " . $row['studio'] . "</p>";
print "<p class='client'> Client: " . $row['client'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
print "</div>";
}
mysql_close($con);
?>
$(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 to Database
$con = new mysqli( 'localhost', 'root', 'root', 'awards' );
if( $con->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 "<div class='item item$awardcat clearfix' data-id='" . $row['entry_id'] . "'>";//add award cat id to each div
print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
print "<p > Studio: " . $row['studio'] . "</p>";
print "<p class='client'> Client: " . $row['client'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
print "</div>";
}
$con->close();