在對錯誤要說的內容有了基本的了解之后，我終于明白了這一點
錯誤：
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>
瞧。它工作得很好。
