如何解决 Uncaught SyntaxError: Unexpected token < in JSON at position 0 控制台错误？

Question

I am very confused. My forum was working fine yesterday and today then now I am getting this error and my forum no longer displays or works. I have also got another js and php for posting a new comment. The comment is still being added to my database it is just not appearing. Anyone know why this is? This is the full error I am getting:

VM232:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.success (comments.js:13)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

HTML

          <div id="content" class="content">
                <form id="forumPost" method='POST'>
                   <textarea rows="3" col="60" name="comment" placeholder="Create a Post..." id="comment"></textarea>
                   <button><input type='submit' name='submit' value='Post' class="post"></button>
                </form>
                <p id="error" class="errormessage"></p>
                <p id="allcomments" class="postmessage"></p>

                <div class="comment-container">
                    <div class="username"><!--obj.username--></div>
                    <div class="comment"><!--obj.comment--></div>
                    <div class="date"><!--obj.commDate--></div>
                    <div class="like"><!--obj.sentiment--></div>
                </div>
            </div>

JS

$(document).ready(function() {

     var comments = document.getElementById("allcomments").value; 

     //Get Storage 
                var username = window.localStorage.getItem("username");

        // Call Ajax for existing comments
        $.ajax({
        type: 'GET',
        url: 'comments.php',
        success: function(result) {
            var arr = JSON.parse(result);

            for(var i = 0; i < arr.length; i++) {
                var obj = arr[i];   

                var output = document.getElementById("allcomments");  

                output.innerHTML += '<div class="comment-container"><div class="username">'+obj.username+'</div><div class="comment">'+obj.comment+'</div><div class="date">'+obj.commDate+'</div><div class="like">'+obj.sentiment+'</div></div>';

            }

        }
    });

    return false;
}); 

PHP

<?php

require_once('checklog.php');
require_once("db_connect.php");
require_once("functions.php");

session_start();

$username = $_POST['username'];

// Print out existing comment
$query  = "SELECT comments.commDate, comments.ID, comments.username, comments.comment, users.username, comments.sentiment FROM comments LEFT JOIN users ON comments.username = users.username"; 
$result = mysqli_query($db_server, $query);
if (!$result)
    die("Database access failed: " . mysqli_error($db_server));
while ($row = mysqli_fetch_array($result)) {

    $comments[] = $row; 
//CHECK THAT THE COMMENT USERID MATCHES SESSION USER ID
if ($row['username'] == $username['username']){
$comments .=" <a href='delete_post.php?pID=".$row['ID']."'>Delete</a>";
}
        if(!isset($username["liked_" . $row['ID']])){
                $comments .= "<a href='like.php?likeid=" . $row['ID'] ."'>Like</a>";
        }else{  
                $comments .="Liked"; 
        } 
}

mysqli_free_result($result);

require_once("db_close.php");

echo json_encode($comments);

?>

Answer 1

check out this line:

$comments[] = $row; 

You declare $comments as array, then:

$comments.=" <a href='delete_post.php?pID=".$row['ID']."'>Delete</a>";

you are appending string to array variable which is absolutely wrong

The result you are returning from server is combination on array and string that result's in invalid format so it will not get converted to the js object.