请不要jQuery建议。
此脚本旨在显示数据库中的更多记录，如果您一直滚动到div 调用结果容器内部的底部。
我面临的问题是相同的数据不断显示。我注意到，如果您更改变量调用开始的值，我注意到它将显示不同的数据部分，即
在用户表中，我只是找到了一种方法，每次我请求显示更多记录时，我都可以不断更改起始变量值，这样我每次触发
scrollTrigger 函数从数据库表的开头开始到表的末尾。我尝试了许多方法来不断更改 start 变量值以通过每个请求显示不同的记录，但我失败了，所以我删除了索引中所有不起作用的代码.php那么我该怎么做呢？
索引.php
<!DOCTYPE html>
<html>
<head>
<style>
#results-container {
background-color: red;
width: 350px;
height: 300px;
margin: auto;
overflow-y: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var start = 0; //<--The starting location, 0 means to start showing records at the beginning of the database table
var limit = 10;//<--Show 10 records every time you trigger the scrollTrigger function
getData();
//Scrolling to the bottom in the results-container shows more records
document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);
function scrollTrigger(e){
var resultsContainer = e.currentTarget;
if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
getData();
}
}
//
function getData(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById('results-container').insertAdjacentHTML('beforeend', xhr.responseText);
//<Allow JS and remove previous appended JS of the requested page>
Array.prototype.forEach.call(
document.querySelectorAll('#results-container script'),
function(script){
script.parentNode.removeChild(script)
eval(script.innerHTML)
}
)
//</Allow JS and remove previous appended JS of the requested page>
}
}
var formData= new FormData();
formData.append('start',start);
formData.append('limit',limit);
xhr.open('POST','data.php')
xhr.send(formData);
}
});
</script>
</head>
<body>
<div id="results-container"></div>
</body>
</html>
数据.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 users 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['user_id']; ?></h2>
<h2><?php echo $row['username']; ?></h2>
<p><?php echo $row['password']; ?></p>
<?php } ?>
在你的 JavaScript 中，你没有更改start和limit的值。因此，您始终向服务器发送相同的启动和限制。
要更改它，您可以在从服务器获取结果并更新 DOM 后(eval后(重新计算start和limit的值：
document.addEventListener('DOMContentLoaded',function(){
var start = 0; //<--The starting location, 0 means to start showing records at the beginning of the database table
var limit = 10;//<--Show 10 records every time you trigger the scrollTrigger function
getData();
//Scrolling to the bottom in the results-container shows more records
document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);
function scrollTrigger(e){
var resultsContainer = e.currentTarget;
if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
getData();
}
}
//
function getData(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById('results-container').insertAdjacentHTML('beforeend', xhr.responseText);
//<Allow JS and remove previous appended JS of the requested page>
Array.prototype.forEach.call(
document.querySelectorAll('#results-container script'),
function(script){
script.parentNode.removeChild(script)
eval(script.innerHTML)
/* HERE */
start = limit;
limit = start + 10;
}
)
//</Allow JS and remove previous appended JS of the requested page>
}
}
var formData= new FormData();
formData.append('start',start);
formData.append('limit',limit);
xhr.open('POST','data.php')
xhr.send(formData);
}
});