Javascript 无限滚动MySQL PHP jQuery-重复结果
该死的家伙！我已经建立了一个应用程序，每2-3分钟从多个RSS提要中检索新项目，并将它们存储到数据库中。我试图使用“无限滚动”效果（使用jQuery）显示DB的内容。所有工作正常，除了在几次“页面/滚动”之后，它有时会显示重复的条目，因为数据库不断地用新内容更新 以下是我正在使用的文件（改编自）： Index.phpJavascript 无限滚动MySQL PHP jQuery-重复结果,javascript,php,jquery,mysql,infinite-scroll,Javascript,Php,Jquery,Mysql,Infinite Scroll,该死的家伙！我已经建立了一个应用程序，每2-3分钟从多个RSS提要中检索新项目，并将它们存储到数据库中。我试图使用“无限滚动”效果（使用jQuery）显示DB的内容。所有工作正常，除了在几次“页面/滚动”之后，它有时会显示重复的条目，因为数据库不断地用新内容更新 以下是我正在使用的文件（改编自）： Index.php <html> <head> <title>Scroll Pagination</title>
<html>
<head>
<title>Scroll Pagination</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"> </script>
<script src="javascript.js"> </script>
<script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css"></style>
<script>
$(document).ready(function() {
$('#content').scrollPagination({
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
<?php
require_once('inc/conn.php');
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$query = "SELECT * FROM News ORDER BY ID DESC LIMIT ".$postnumbers." OFFSET ".$offset;
if ($result = mysqli_query($mysqli, $query))
{
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result))
{
echo '<h1>' . $row["ID"] . ' - ' . $row["Titlu"] . '(' . $row["Data_citire"] .')</h1>';
echo '<h3>' . $row["Sursa"] . '</h3>';
}
}
/* free result set */
mysqli_free_result($result);
?>
滚动分页
尝试{Typekit.load（）；}catch（e）{}
$（文档）.ready（函数（）{
$（“#内容”）。滚动分页({
nop:10，//要加载的每个卷轴的帖子数
偏移量：0，//在本例中，初始偏移量从0开始
错误：“无更多帖子！”，//当用户到达末尾时，这是所显示的消息
//已显示。如果需要，您可以对此进行更改。
延迟：500，//当您向下滚动时，延迟一段时间后将加载帖子。
//这主要是出于可用性方面的考虑。您可以根据自己的需要进行修改
scroll:true//如果设置为false，则在用户滚动时不会加载主位。
//但如果用户单击，仍将加载。
});
});
<html>
<head>
<title>Scroll Pagination</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"> </script>
<script src="javascript.js"> </script>
<script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css"></style>
<script>
$(document).ready(function() {
$('#content').scrollPagination({
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
<?php
require_once('inc/conn.php');
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$query = "SELECT * FROM News ORDER BY ID DESC LIMIT ".$postnumbers." OFFSET ".$offset;
if ($result = mysqli_query($mysqli, $query))
{
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result))
{
echo '<h1>' . $row["ID"] . ' - ' . $row["Titlu"] . '(' . $row["Data_citire"] .')</h1>';
echo '<h3>' . $row["Sursa"] . '</h3>';
}
}
/* free result set */
mysqli_free_result($result);
?>
function($) {
$.fn.scrollPagination = function(options) {
var settings = {
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
}
// Extend the options so they work with the plugin
if(options) {
$.extend(settings, options);
}
// For each so that we keep chainability.
return this.each(function() {
// Some variables
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false; // Checks if the scroll action is happening
// so we don't run it multiple times
// Custom messages based on settings
if($settings.scroll == true) $initmessage = 'Scroll for more or click here';
else $initmessage = 'Click for more';
// Append custom messages and extra UI
$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
function getData() {
// Post data to ajax.php
$.post('ajax.php', {
action : 'scrollpagination',
number : $settings.nop,
offset : offset,
}, function(data) {
// Change loading bar content (it may have been altered)
$this.find('.loading-bar').html($initmessage);
// If there is no data returned, there are no more posts to be shown. Show error
if(data == "") {
$this.find('.loading-bar').html($settings.error);
}
else {
// Offset increases
offset = offset+$settings.nop;
// Append the data to the content div
$this.find('.content').append(data);
// No longer busy!
busy = false;
}
});
}
getData(); // Run function initially
// If scrolling is enabled
if($settings.scroll == true) {
// .. and the user is scrolling
$(window).scroll(function() {
// Check the user is at the bottom of the element
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
// Now we are working, so busy is true
busy = true;
// Tell the user we're loading posts
$this.find('.loading-bar').html('Loading Posts');
// Run the function to fetch the data inside a delay
// This is useful if you have content in a footer you
// want the user to see.
setTimeout(function() {
getData();
}, $settings.delay);
}
});
}
// Also content can be loaded by clicking the loading bar/
$this.find('.loading-bar').click(function() {
if(busy == false) {
busy = true;
getData();
}
});
});
}
})(jQuery);
函数（$）{
$.fn.scrollPagination=函数（选项）{
变量设置={
nop:10，//要加载的每个卷轴的帖子数
偏移量：0，//在本例中，初始偏移量从0开始
错误：“无更多帖子！”，//当用户到达末尾时，这是所显示的消息
//已显示。如果需要，您可以对此进行更改。
延迟：500，//当您向下滚动时，延迟一段时间后将加载帖子。
//这主要是出于可用性方面的考虑。您可以根据自己的需要进行修改
scroll:true//如果设置为false，则在用户滚动时不会加载主位。
//但如果用户单击，仍将加载。
}
//扩展选项，使其与插件一起工作
如果（选项）{
$.extend（设置、选项）；
}
//为每一个，使我们保持链接能力。
返回此.each（函数（）{
//一些变量
$this=$（this）；
$settings=设置；
var offset=$settings.offset；
var busy=false；//检查是否正在执行滚动操作
//所以我们不会多次运行它
//基于设置的自定义消息
如果（$settings.scroll==true）$initmessage='滚动查看更多信息或单击此处'；
else$initmessage='单击以获取更多信息'；
//附加自定义消息和额外的用户界面
$this.append（“”+$initmessage+“”）；
函数getData（）{
//将数据发布到ajax.php
$.post（'ajax.php'{
操作：“滚动分页”，
编号：$settings.nop，
抵销：抵销，
}，函数（数据）{
//更改加载条内容（可能已更改）
$this.find（'.loading bar'）.html（$initmessage）；
//如果没有返回数据，则不会显示更多的帖子。显示错误
如果（数据==“”）{
$this.find（'.loading bar'）.html（$settings.error）；
}
否则{
//抵消增加
偏移量=偏移量+$settings.nop；
//将数据附加到content div
$this.find（'.content'）.append（数据）；
//不再忙了！
忙=假；
}
});
}
getData（）；//最初运行函数
//如果启用了滚动
如果（$settings.scroll==true）{
//…并且用户正在滚动
$（窗口）。滚动（函数（）{
//检查用户是否位于元素的底部
if（$（窗口）.scrollTop（）+$（窗口）.height（）>$this.height（）&&&！busy）{
//现在我们正在工作，所以忙碌是真的
忙=真；
//告诉用户我们正在加载帖子
$this.find（'.loading bar'）.html（'loading Posts'）；
//运行函数以在延迟内获取数据
//如果您的页脚中有内容，这将非常有用
//希望用户看到。
setTimeout（函数（）{
getData（）；
}，$settings.delay）；
}
});
}
//也可以通过单击加载栏加载内容/
$this.find（'.loading bar'）。单击（function（）{
如果（忙==假）{
忙=真；
getData（）；
}
});
});
}
})（jQuery）；
$query = "SELECT * FROM News WHERE ID < ".$id_of_last_item_on_page." ORDER BY ID DESC LIMIT ".$postnumbers; /* No OFFSET*/
$query=“SELECT*FROM News WHERE ID<”。页面上最后一个项目的$ID.。“按ID描述的订单限制”。$postnumbers；/*无偏移*/