当包含在另一个顶部带有 HTML 标签的文件中时，无限滚动不会在向下滚动时加载更多帖子

Question

我有一个 Infinite Scroll 可以在滚动到底部时加载更多数据（来自数据库），但是，当我尝试将该文件包含在另一个 .PHP 文件中并在其顶部写入任何 HTML 标记时，它不会加载更多帖子。在控制台上，我得到一个错误Uncaught SyntaxError: Unexpected token < in JSON at position 0at 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)`我的代码如下：获取数据.php<?phprequire_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;    }}

Answer 1

在对错误要说的内容有了基本的了解之后，我终于明白了这一点

错误：

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)

JSON 应以有效的 JSON 值开头——对象、数组、字符串、数字或 false/true/null。此响应以 < 开头（因此是“意外标记 <”）。

那个意想不到的标记 < 是一个强有力的线索，表明响应是 HTML 而不是 JSON。

根本原因是服务器返回了 HTML 或其他一些非 JSON 字符串。

所以我所做的只是简单地将 JSON 代码剪切到 test.php 的顶部，让一切保持原样。

索引.php

 <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

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

瞧。它工作得很好。