【发布时间】：2018-11-09 09:11:23
【问题描述】：
我很困惑，我不知道如何解决这个问题，我不确定我是否必须调整 jQuery 或 SQL 才能正确显示此问题而不会重复。我只是不知道，所以我有这个脚本，每次按下加载更多按钮时都会加载一组记录。
效果很好，但是如果我在加载下一组记录之前添加一条新记录，它将显示上一组记录中最后一条记录的副本到下一组记录中。下面的两个例子将数字表示为记录
Example 1
正常情况下不添加任何来源的记录
总记录 6
6,5,4（加载更多）3,2,1
Example 2
在使用加载更多按钮加载下一组记录之前，从任何来源添加一条新记录
总记录 6
6,5,4（在不使用此脚本的情况下，例如在 php my admin 中添加了一条新记录）4,3,2
正如您在示例 2 中看到的，我在加载下一组记录之前在 php my admin 中添加了一条新记录，您可以看到第一次加载包含记录 6、5、4，下一次加载包含 4 个记录， 3,2 注意它再次显示 4 它应该显示 3,2,1
这是描述我的问题的最简单方法。我添加了我的问题的 gif 截图，以更好地了解我所面临的问题。注意黄色球内的数字 228 和 227 这是正常的工作情况，如第一个 gif 屏幕截图所示，注意没有从任何来源添加新记录。
在这个 gif 屏幕截图中，我从另一个来源添加了一条新记录，例如在 php my admin 中，然后通过加载更多按钮加载下一组记录。这是我正在尝试解决的问题情况，请注意黄色球中的 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>
【问题讨论】：
标签： javascript jquery sql ajax mysqli