Javascript PHP无限滚动不加载更多帖子_Javascript_Php_Jquery_Ajax

Javascript PHP无限滚动不加载更多帖子

javascript php jquery ajax

Javascript PHP无限滚动不加载更多帖子,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正试图让这个无限卷轴工作。我不擅长php或javascript，这对我没有帮助它将加载前20篇文章，但无论出于什么原因，当我向下滚动以加载更多文章时，我总是收到一个错误，指出“没有更多的文章可用” 这是： index.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Home Page</title> <link hr

我正试图让这个无限卷轴工作。我不擅长php或javascript，这对我没有帮助

它将加载前20篇文章，但无论出于什么原因，当我向下滚动以加载更多文章时，我总是收到一个错误，指出“没有更多的文章可用”

这是： index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
<div class="container-fluid no-gutter">
  <nav class="navbar navbar-dark bg-dark">
    <div class="container">
      <h1 class="navbar-brand">Posts</h1>
    </div>
  </nav>
  <div class="container padding">
    <div class="row">
      <div class="col-3">

      </div>
      <div class="main col-9" id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?php echo $total; ?>" />
        <?php
          include ("config/config.php");
          
            try {
              $conn = new PDO("mysql:host=$dbh;dbname=$dbn", $dbu, $dbp);
              $sql = "SELECT address, FROM_UNIXTIME(date/1000,'%M %D, %Y %h:%i:%s') as date, body FROM table_name";
              $total = $conn->query($sql)->rowCount();
              $sql = "SELECT row, address, FROM_UNIXTIME(date/1000, '%M %D, %Y %h:%i %p')as date, body FROM table_name LIMIT 20";

              foreach($conn->query($sql) as $row) {
                echo '<div class= "home">'; 
                echo '<div class= "address">' . $row["address"] . '</div>';
                echo '<div class= "body">' . $row["body"] . '</div>';
                echo '<div class= "date">' . $row["date"] . '</div>';
                echo '</div>';
              }
            }
            catch(PDOException $e) {
              echo "Error: " . $e->getMessage();
            }
            $conn = null;
        ?>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
        windowOnScroll();
        $("div.address:contains(Var)").parent().removeClass("home");
                $("div.address:contains(Var)").parent().addClass("away");
});
function windowOnScroll() {
       $(window).on("scroll", function(e){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
           console.log('Scrolling')
            if($(".home").length < $("#total_count").val()) {
                var lastId = $(".home:last").attr("id");
                getMoreData(lastId);
            }
            else{
                console.log('No More posts aviliable')
            }
        }
    });
}

function getMoreData(lastId) {
       $(window).off("scroll");
    $.ajax({
        url: 'getMoreData.php?lastId=' + lastId,
        type: "get",
        beforeSend: function ()
        {
            $('.ajax-loader').show();
        },
        success: function (data) {
               setTimeout(function() {
                $('.ajax-loader').hide();
            $("#post-list").append(data);
            windowOnScroll();
               }, 10);
        }
   });
}
</script>
</body>
</html>


主页
帖子
$（文档）.ready（函数（）{
windowOnScroll（）；
$（“div.address:contains（Var）”）.parent（）.removeClass（“home”）；
$（“div.address:contains（Var）”）.parent（）.addClass（“away”）；
});
函数windowOnScroll（）{
$（窗口）。打开（“滚动”，功能（e）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
console.log（'滚动'）
if（$（“.home”）.length<$（“#总数”）.val（））{
var lastId=$（“.home:last”）.attr（“id”）；
getMoreData（lastId）；
}
否则{
console.log（'No More posts'）
}
}
});
}
函数getMoreData（lastId）{
$（窗口）。关闭（“滚动”）；
$.ajax({
url:'getMoreData.php？lastId='+lastId，
键入：“获取”，
beforeSend:函数（）
{
$（'.ajax loader'）.show（）；
},
成功：功能（数据）{
setTimeout（函数（）{
$（'.ajax loader'）.hide（）；
$（“#帖子列表”）。追加（数据）；
windowOnScroll（）；
}, 10);
}
});
}

getMoreData.php

<?php
    include ("config/config.php");

    $conn = new PDO("mysql:host=$dbh;dbname=$dbn", $dbu, $dbp);
    $lastId = $_GET['lastId'];
    $sql = "SELECT row, address, FROM_UNIXTIME(date/1000, '%M %D, %Y %h:%i %p')as date, body FROM table_name WHERE `row` < '" .$lastId . "' LIMIT 20";

    foreach($conn->query($sql) as $row) {
      echo '<div class="home">'; 
      echo '<div class= "address">' . $row["address"] . '</div>';
      echo '<div class= "body">' . $row["body"] . '</div>';
      echo '<div class= "date">' . $row["date"] . '</div>';
      echo '</div>';
    }

?>

尝试放置尝试放置确实阻止消息显示的，但仍无法加载更多帖子。我必须弄清楚getMoreData.php文件中的某些错误。这确实阻止了消息的显示，但仍然没有加载更多的帖子。我必须在getMoreData.php文件中找出一些错误。