Question

我很困惑，我不知道如何解决这个问题，我不确定是否必须调整jQuery或SQL以正确显示此内容而不重复。我只是不知道，所以我有这个脚本，每当您按下加载更多按钮时，该脚本就会加载一组记录。

它很好用，但是如果我在加载下一组记录之前添加新记录，它将显示前一组记录中的最后一条记录到下一组记录中的重复记录。下面的两个示例将数字表示为记录

Example 1

正常情况下，没有从任何来源添加记录

总记录6

6,5,4（加载更多）3,2,1

Example 2

在使用“加载更多”按钮加载下一组记录之前，将从任何来源添加新记录

总记录6

6,5,4（例如，在不使用此脚本的情况下，我的php中添加了一条新记录）4,3,2

如示例2所示，在加载下一组记录之前，我在php的admin中添加了一条新记录，您可以看到第一次加载包含记录6,5,4，而下一次加载包含记录4， 3,2注意它再次显示4它应该显示3,2,1

这是描述问题的最简单方法。我添加了我的问题的gif屏幕截图，以更好地了解我所面临的问题。请注意黄色球中的数字228和227，这是正常的工作情况，如第一个gif屏幕截图所示，请注意，没有任何来源添加新记录。

在此gif屏幕截图中，我在通过“加载更多”按钮加载下一组记录之前，从其他来源（例如php）添加了一条新记录。这是我要解决的问题，我要注意黄色球中的228，您可以看到它两次显示228，因为我在幕后添加了新的记录。无论我是否在后台添加新记录，它都应该一次显示228。

那么我该如何解决此问题？我不希望在下一次加载中显示重复的记录，因为我在加载下一组记录之前添加了一条新记录。

让我知道是由jQuery引起的还是由SQL引起的。

我的代码

index.html

<!DOCTYPE html>
<html>
<head>
<style>

#load-more-button {
width: 100px;
margin: auto;
display: block;
}

.results-container {
width: 350px;
margin: auto;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
<script type="text/javascript">
$(document).ready(function (){

/*<load more by pressing a button script>*/

//<settings define
var start = 0;
var limit = 10;
//

//Call the ajax request on page load
getData();
//

//load more records by pressing a button
$('#load-more-button').click(function(){
getData();
});
//

/*<function>*/
function getData() {

//settings variable
var settings = {
getData: 1,
start: start,
limit: limit
};
//

//result variable
var result= function(response) {
start += limit;
$(".results-container").append(response);
}
//

//request
$.ajax({
url: 'data.php',
type: 'POST',
dataType: 'text',
data: settings,
success: result 
});
}
/*</function>*/
/*</load more by pressing a button script>*/

});
</script>
</head>
<body>

<div class="results-container"></div>
<button id='load-more-button'>Load more</button>
</body>
</html>

data.php

<?php
$servername='localhost';
$username='jd';
$password='1234';
$db_name= 'test';

$connect = new mysqli($servername,$username,$password,$db_name);

$start = $connect->real_escape_string($_POST['start']);
$limit = $connect->real_escape_string($_POST['limit']);

$query = "SELECT*FROM records WHERE NOT status='remove' ORDER BY ID DESC LIMIT $start, $limit";

$result= $connect->query($query);

?>
<style>
#number{
background-color: gold;
color: black;
border-radius: 100%;
padding: 5px;
}

h2{
display: inline-block;
}

</style>

<?php while($row = $result->fetch_assoc()) { ?>

<h2 id='number' ><?php echo $row['id']; ?></h2>
<h2><?php echo $row['html_id']; ?></h2>
<p><?php echo $row['source']; ?></p>

<?php } ?>

<h1>
<?php 
//Conditional statement if there is no more records to load
if($result->num_rows == 0){
    echo 'End';
    echo'
    <script>
    $("#load-more-button").css({"display": "none"});
    </script>
    ';
}
//
?>
</h1>

Answer 1

您的SQL查询是正确的，但在这种情况下是错误的。

SELECT*FROM records WHERE NOT status='remove' ORDER BY ID DESC LIMIT $start, $limit";

例如

您的数据库中有1,2,3,4,5,6条记录。您的查询以降序检索记录。因此，首先检索3条记录，如6、5、4，然后在下一个请求中检索3、2、1。

但是，当您从数据库（6,5,4）中检索到前3条记录时，您将再添加一条ID = 7的记录。现在您的表中总共有7条记录。当您再次单击加载更多时，它将跳过前3条记录。表示它跳过7、6、5。因此，在下一个查询中将返回4、3、2。这就是为什么重复4。

有道理??

加载更多记录脚本，如果添加了新记录，则显示上一组记录中的最后一条记录

1 个答案: