Question

请没有jQuery建议。

如果您一直滚动到div调用results-container内部的底部，则此脚本旨在显示数据库中的更多记录。

我面临的问题是相同的数据不断显示。我注意到，如果您更改变量调用start的值，我会注意到它将显示数据的不同部分

在用户表中，我只是找到了一种方法，可以在每次请求显示更多记录时不断更改起始变量值，以便每次触发

scrollTrigger函数从数据库表的开头到表的结尾。我尝试了许多方法来不断更改起始变量值，以不断显示每个请求的不同记录，但是失败了，所以我删除了index.php中所有无效的代码，该怎么办？

index.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>

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 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 } ?>

Answer 1

在JavaScript中，您没有更改start和limit的值。因此，您总是向服务器发送相同的开始和限制。

要更改它，可以在从服务器获取结果并更新DOM之后（在start之后）重新计算limit和eval的值：

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);

}

});

脚本不显示新记录，而是继续显示相同的记录

1 个答案: