Внутренняя ошибка сервера / ошибка XHR: [объект объекта] в методе jQuery $. ajax

Question

Я использую метод jQuery $.ajax для получения некоторых данных из PHP скрипта (card-data.php) и вывода их на другую страницу PHP.

Когда запускается jQuery, я получаю Internal Server Error, а когда я console.log ответ xhr, я получаю следующее: [object Object]

Edit Теперь я могу просмотреть весь объект xhr благодаря комментарию @ CBroe

Я упростил и удалил некоторый «лишний» код при публикации здесь, чтобы немного упростить его, но когда я воссоздал свой веб-сайт с помощью кода ниже У меня все те же ошибки.

jQuery:

$(document).ready(function(){
    const cardsHidden = $('#cards-hidden');
    $.ajax({
        url: '../../php/includes/card/card-data.php',
        type: 'GET',
        success: function(data){ 
            cardsHidden.html(data);
        },
        error: function(xhr, status, error) {
            console.log("AJAX error:", status, "Error:", error, "XHR:", xhr);
        }
    });
});

Скрипт PHP (card-data. php):

<?php 
$sql       = 'SELECT username, name, age, FROM database ORDER BY RAND() LIMIT 3';
$result    = $conn->query($sql);

if($result->num_rows > 0) {
    $username   = [];
    $fullName   = [];
    $age        = [];
    while($row = $result->fetch_assoc()) {
        $username[]   = $row['username'];
        $fullName[]   = $row['name'];
        $age[]        = $row['age'];
    }
} else {
    echo '<p>No posts to show...</p>';
}

$conn->close();
?>

Страница PHP (вывод страница):

<?php include 'card-data.php'; ?>

<div id="cards-hidden" class="card-wrapper --center-align">
    <?php
        for ($i = 0; $i < 3; $i++) {
        echo '
        <div class="card'.$i.' card">
            <div class="card__title">
               <h5>'.$fullName[$i].', <span class="card__title--age">'.$age[$i].'</span></h5>
               <p class="card__title--username">('.$username[$i].')</p>
            </div>
        </div>';
        }
    ?>
</div>