Fatal编程技术网
  • javascript/
  • Javascript 无限卷轴赢了'；当包含在另一个上面有HTML标记的文件中时，不要在向下滚动时加载更多文章

Javascript 无限卷轴赢了'；当包含在另一个上面有HTML标记的文件中时，不要在向下滚动时加载更多文章

javascript php

Javascript 无限卷轴赢了'；当包含在另一个上面有HTML标记的文件中时，不要在向下滚动时加载更多文章,javascript,php,Javascript,Php,我有一个无限滚动，滚动到底部时会加载更多数据（来自DB） 然而，当我尝试将该文件包含在另一个.PHP文件中并在其顶部写入任何HTML标记时，它不会加载更多的帖子 在控制台上，我得到一个错误 Uncaught SyntaxError:JSON中位置0处的意外标记=$（文档）.height（）-$（窗口）.height（））{ if（$（“.post item”）.length

我有一个无限滚动，滚动到底部时会加载更多数据（来自DB）

然而，当我尝试将该文件包含在另一个.PHP文件中并在其顶部写入任何HTML标记时，它不会加载更多的帖子

在控制台上，我得到一个错误

Uncaught SyntaxError:JSON中位置0处的意外标记<

at JSON.parse (<anonymous>)
at Object.success (test.php:126)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)`
JSON.parse（）上的

at Object.success（test.php:126）
at i（jquery-3.2.1.min.js:2）
在Object.fireWith[as resolveWith]（jquery-3.2.1.min.js:2）
在A（jquery-3.2.1.min.js:4）
在XMLHttpRequest。（jquery-3.2.1.min.js:4）`
我的代码如下：

getData.php

<?php

require_once('db.php');

if (! function_exists('getData')) {
    /**
     * @param int $offset
     * @param int $limit
     * @return array|null
     */
    
    function getData($offset, $limit, $conn) {
        $offset = (int)$offset;
        $limit  = (int)$limit;
        $sqlQuery = "SELECT * FROM tbl_posts ORDER BY id DESC LIMIT $limit OFFSET $offset";
        $result = mysqli_query($conn, $sqlQuery);
        $rows = [];
        while ($row = mysqli_fetch_assoc($result)) {
            $cleanRow = [];
            foreach ($row as $column => $value) {
                $cleanRow[$column] = htmlentities($value);
            }
            $rows[]= $cleanRow;
        }
        return $rows;
    }
}

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<div>
<?php include("index.php"); ?>
</div> 

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

<div class="some">
<?PHP include("index.php"); ?>
</div>


身体{
字体系列：Arial；
背景：#e9ebee；
字号：0.9em；
}
1.柱墙{
背景：#FFF；
边框：#e0dfdf 1px实心；
填充：20px；
边界半径：5px；
保证金：0自动；
宽度：500px；
}
.邮政项目{
填充：10px；
边框：#F3 1px实心；
边界半径：5px；
边缘底部：30px；
}
·职位名称{
颜色：4faae6；
}
.ajax加载程序{
显示：块；
文本对齐：居中；
}
.ajax加载程序img{
宽度：50px；
垂直对齐：中间对齐；
}
;
if（初始数据）{
if（initialData.rows）{
addrows（initialData.rows）；
$（'.ajax loader'）.hide（）；
}
}
windowOnScroll（）；
});
函数windowOnScroll（）{
$（窗口）。打开（“滚动”，功能（e）{
if（$（窗口）.scrollTop（）+1>=$（文档）.height（）-$（窗口）.height（））{
if（$（“.post item”）.length<$（“#总数”）.val（）{
let offset=$（'#offset'）.val（）；
getMoreData（偏移量）
}
}
});
}
函数getMoreData（偏移量）{
$（'.ajax loader'）.show（）；
$（窗口）。关闭（“滚动”）；
让pageUrl=window.location.href.split（“？”）[0]；
$.ajax({
url:pageUrl+'？仅数据=1&offset='+offset，
键入：“获取”，
成功：功能（响应）{
response=JSON.parse（response）；
if（response.rows）{
addrows（response.rows）；
if（response.offset）{
$（'#offset'）.val（response.offset）；
}
$（'.ajax loader'）.hide（）；
}
windowOnScroll（）；
}
});
}
函数addrows（行）{
让postList=$（“#post list”）；
$.each（行，函数（i，行）{
让rowHtml='
'+row.title+'
'+row.content+'
'；
append（rowHtml）；
});
}
现在请注意，上面的代码工作得非常好，因为无限滚动正是它所需要的。 但当我把它放在另一个文件中，比如

test.php

<?php

require_once('db.php');

if (! function_exists('getData')) {
    /**
     * @param int $offset
     * @param int $limit
     * @return array|null
     */
    
    function getData($offset, $limit, $conn) {
        $offset = (int)$offset;
        $limit  = (int)$limit;
        $sqlQuery = "SELECT * FROM tbl_posts ORDER BY id DESC LIMIT $limit OFFSET $offset";
        $result = mysqli_query($conn, $sqlQuery);
        $rows = [];
        while ($row = mysqli_fetch_assoc($result)) {
            $cleanRow = [];
            foreach ($row as $column => $value) {
                $cleanRow[$column] = htmlentities($value);
            }
            $rows[]= $cleanRow;
        }
        return $rows;
    }
}

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<div>
<?php include("index.php"); ?>
</div> 

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

<div class="some">
<?PHP include("index.php"); ?>
</div>
前几篇文章（7）与底部的loader.gif一起加载。就这些

非常感谢您的帮助。

在基本了解了错误的含义后，我终于明白了这一点

错误：

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at Object.success (test.php:126)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

Uncaught SyntaxError:JSON中位置0处的意外标记<
在JSON.parse（）处
at Object.success（test.php:126）
at i（jquery-3.2.1.min.js:2）
在Object.fireWith[as resolveWith]（jquery-3.2.1.min.js:2）
在A（jquery-3.2.1.min.js:4）
在XMLHttpRequest。（jquery-3.2.1.min.js:4）
JSON应该以有效的JSON值开始–对象、数组、字符串、数字或false/true/null。此响应以一个“<”开头（因此为“意外标记”； if（初始数据）{ if（initialData.rows）{ addrows（initialData.rows）； $（'.ajax loader'）.hide（）； } } windowOnScroll（）； }); 函数windowOnScroll（）{ $（窗口）。打开（“滚动”，功能（e）{ if（$（窗口）.scrollTop（）+1>=$（文档）.height（）-$（窗口）.height（））{ if（$（“.post item”）.length<$（“#总数”）.val（）{ let offset=$（'#offset'）.val（）； getMoreData（偏移量） } } }); } 函数getMoreData（偏移量）{ $（'.ajax loader'）.show（）； $（窗口）。关闭（“滚动”）； 让pageUrl=window.location.href.split（“？”）[0]； $.ajax({ url:pageUrl+'？仅数据=1&offset='+offset， 键入：“获取”， 成功：功能（响应）{ response=JSON.parse（response）； if（response.rows）{ addrows（response.rows）； if（response.offset）{ $（'#offset'）.val（response.offset）； } $（'.ajax loader'）.hide（）； } windowOnScroll（）； } }); } 函数addrows（行）{ 让postList=$（“#post list”）； $.each（行，函数（i，行）{ 让rowHtml='

'+row.title+'

'+row.content+'

'； append（rowHtml）； }); } test.php

<?php

require_once('db.php');

if (! function_exists('getData')) {
    /**
     * @param int $offset
     * @param int $limit
     * @return array|null
     */
    
    function getData($offset, $limit, $conn) {
        $offset = (int)$offset;
        $limit  = (int)$limit;
        $sqlQuery = "SELECT * FROM tbl_posts ORDER BY id DESC LIMIT $limit OFFSET $offset";
        $result = mysqli_query($conn, $sqlQuery);
        $rows = [];
        while ($row = mysqli_fetch_assoc($result)) {
            $cleanRow = [];
            foreach ($row as $column => $value) {
                $cleanRow[$column] = htmlentities($value);
            }
            $rows[]= $cleanRow;
        }
        return $rows;
    }
}

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<div>
<?php include("index.php"); ?>
</div> 

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            background: #e9ebee;
            font-size: 0.9em;
        }

        .post-wall {
            background: #FFF;
            border: #e0dfdf 1px solid;
            padding: 20px;
            border-radius: 5px;
            margin: 0 auto;
            width: 500px;
        }

        .post-item {
            padding: 10px;
            border: #f3f3f3 1px solid;
            border-radius: 5px;
            margin-bottom: 30px;
        }

        .post-title {
            color: #4faae6;
        }

        .ajax-loader {
            display: block;
            text-align: center;
        }
        .ajax-loader img {
            width: 50px;
            vertical-align: middle;
        }
    </style>
<div class="post-wall">
    <div id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
        <input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
    </div>
    <div class="ajax-loader text-center">
        <img src="LoaderIcon.gif"> Loading more posts...
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // load the initial rows on page load
        let initialData = <?= $data ?? '' ?>;
        if (initialData) {
            if (initialData.rows) {
                addrows(initialData.rows);
                $('.ajax-loader').hide();
            }
        }
        windowOnScroll();

    });
    function windowOnScroll() {
    $(window).on("scroll", function(e) {
      if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        if ($(".post-item").length < $("#total_count").val()) {
          let offset = $('#offset').val();
          getMoreData(offset)
        }
      }
    });
  }

    function getMoreData(offset) {
        $('.ajax-loader').show();
        $(window).off("scroll");
        let pageUrl = window.location.href.split('?')[0];
        $.ajax({
            url: pageUrl + '?dataOnly=1&offset=' + offset,
            type: "get",
            
            success: function (response) {
            response = JSON.parse(response);
            if (response.rows) {
            addrows(response.rows);
            if (response.offset) {
            $('#offset').val(response.offset);
            }
            $('.ajax-loader').hide();
            }
            windowOnScroll();
            }
        });
    }

    function addrows(rows) {
        let postList = $("#post-list");
        $.each(rows, function (i, row) {
            let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
            postList.append(rowHtml);
        });
    }
</script>

<?php
require_once ('getData.php');

$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit  = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
    'rows'   => $rows,
    'offset' => $offset,
];


$data = json_encode($data);

// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
    echo $data;
    exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>

<div class="some">
<?PHP include("index.php"); ?>
</div>
瞧，它工作得很好

感谢@WesleySmith&@AngelDeykov他们在这方面花了不少时间。

您有任何js错误吗？另外，您确定调用了getMoreData方法吗？我的建议是：将console.log（offset）放在函数getMoreData（offset）之后{…然后在调试器中查看是否有任何结果。@AngelDeykov所以我在getMoreData之后添加了console.log，当在网络中单击
test.php？dataOnly=1&offset=7时，控制台会出现相同的JQuery错误。我从表中获取数据作为响应。如果您获取了所需的数据，它就不会显示在页面？Is函数中