Передавать переменную от jquery до PHP в одном документе без обновления

Question

У меня есть страница, на которой отображается некоторая информация о помете для собак, и когда я нажимаю кнопку, чтобы поставить отметку «Нравится», она должна отображать информацию о следующем помете в списке. До этого момента я делал это, используя refre sh (так что вы можете видеть остатки этой системы в коде), но теперь я пытаюсь использовать AJAX для этого. Я хотел бы знать, могу ли я установить переменную $litter, которую я использую для вставки данных в код HTML, используя ответ от моего AJAX, или мне нужно вручную изменить свойства каждый элемент по отдельности, что кажется неуклюжей системой, которая может привести к ошибкам Вот код моего файла PHP, который отображает информацию:

<?php include "templates/include/header.php" ?>

<?php 
    if (isset($_POST['litter_id'])) {
        $litter = Litter::getById($_POST['litter_id']);
    } else {
        $litter = $results['litter']; 
    }

?>

<?php if ($_GET['litterId'] <= Litter::getList()['totalRows']) { ?>

    <?php if ($litter->sold == 0&&!User::getByUsername($_SESSION['username'])->hasInteractedWith($litter)) { ?>

        <p id="responsedata"></p>
        <h2>
            <a href=".?action=viewUser&amp;userId=<?php echo $litter->parent_id; ?>"><?php echo htmlspecialchars($litter->getUsername()); ?></a>'s <?php echo $litter->breed; ?> Litter
        </h2>
        <img id="litterImg" src="<?php echo $litter->getPhoto()->photo_ref; ?>" />
        <p><?php echo $litter->age; ?> old</p>
        <p><?php echo $litter->description; ?></p>
        <button class="likelitterbtn" id="<?php echo $litter->id; ?>">Like</button> <a href=".?action=dislike_litter&amp;litterId=<?php echo $litter->id; ?>">Dislike</a>

    <?php } else {
            header("Location: .?action=explore&litterId=". ($litter->id + 1));
    } ?>

<?php } else echo "You have viewed all the litters"; ?>

</div>
<!--Include jQuery-->
<script type="text/javascript" src="./js/jquery.min.js"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click", ".likelitterbtn", function(){

            $.ajax({
                type:"POST",
                url: './ajax.php',
                dataType: 'json',
                data:{action:'like_litter_from_explore', litter_id:$(this).attr("id"), username: "<?php echo (isset($_SESSION['username']))?$_SESSION['username']:"" ?>"},
                success: function(response){
                    if ("header" in response) {
                        window.location.replace(response.header); 
                    } else if ("litter" in response) {
                        $.post(document.location,{litter_id: response.litter_id}, function(response) {
                            $("#responsedata").html(response);
                        });
                    }       
                }
            });
        });
    });

</script>
</body>
</html>

, а вот мой ajax. php файл, который обрабатывает запрос (только соответствующая функция)

function likeLitter($explore) {
    if ($_POST['username'] !== "") {
        $pass = [
            "user_id" => User::getByUsername($_POST['username'])->id,
            "litter_id" => $_POST['litter_id'],
            "islike" => 1,
        ];
        $interaction = new LitterInteractions;
        $interaction->storeFormValues($pass);
        $interaction->insert();
        if ($explore) {
            $litter = Litter::getById($_POST['litter_id'] + 1);
            echo json_encode(array("litter_id" => $litter->id));  
        }
    } else {
        echo json_encode(array("header" => "index.php?action=login&redirectfrom=like_litter"));
    }
}