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

Question

我有一个 Infinite Scroll 可以在滚动到底部时加载更多数据（来自数据库），

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

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

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

我的代码如下：

获取数据.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;

    }

}

Answer 1

在对错误要说的内容有了基本的了解之后，我终于明白了这一点错误：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)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<?phprequire_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 jsonif ($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>瞧。它工作得很好。