Script "afficher plus" AJAX

Bonjour,

Je travail actuellement sur un site web pour un projet.

J'ai sur ce site besoin d'afficher des avis/commentaires, mais je ne veux pas tous les afficher d'un coup, j'aimerais les afficher 3 par 3 sans recharger la page.

Pour cela j'ai donc tenté de faire un script, qui ne marche pas bien évidemment car mes connaissances dans ce domaine sont encore très limités.

C'est pourquoi j'ai besoin de votre aide.



Voici mon script.

J'aimerais pouvoir dès le chargement de la page afficher les 3 premiers avis, puis en cliquant sur un certain bouton afficher les 3 suivants et ainsi de suite jusqu'à arriver jusqu'à la fin de la table.

$(document).ready(function(){
            var flag = 0;
            $.ajax({
                type: "GET",
                url:"get_data_avis.php",
                data: {
                    'offset': 0,
                    'limit': 3 
                    },
                    success: function(data){
                        $('body').append(data);
                        flag +=3;
                    };
            });
            
            $('.ajouterCom').click(function() {
                $.ajax({
                    type: "GET",
                    url: "get_data_avis.php",
                    data: {
                        'offset': flag,
                        'limit': 3
                    },
                    success: function(data){
                        $('body').append(data);
                        flag +=3;
                    };
                });
            });
        });

Et voici ma page PHP avec ma requête :

<?php
if(isset($_GET['offset']) && isset ($_GET['limit'])) {
            $limit = $_GET['limit'];
            $offset = $_GET['offset'];
            $connection = mysqli_connect('localhost','root','','Hybrid');
    
            $data = mysqli_query($connection,"SELECT * FROM client LIMIT ${limit} OFFSET ${offset}");
            while($donnees = mysqli_fetch_array($data)) {
                echo '
                    <div class="col-sm-4">
                    <div class="review">
                        <div class="hudcenter2">
                            <div class="hud1"></div>
                        </div>
                        
                        <p class="matriculeId">MATRICULE ID - '.$donnees['matricule'].'</p>
                        <div class="cyberBorders5"></div>
                        <div class="reviewCenter">
                            <div class="trait">
                                <div class="losange">
                                    <img class="clients glitch-img" src="'.$donnees['img'].'">
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-8 text-center">
                                <div class="cyberBorders6"></div>
                                <div class="cyberBorders7"></div>
                                <div class="reviewLogos">
                                    <img class="reviewLogo" src="./img/review.png">
                                    <img class="reviewLogo" src="./img/review.png">
                                    <img class="reviewLogo" src="./img/review.png">
                                    <img class="reviewLogo" src="./img/review.png">
                                    <img class="reviewLogo" src="./img/review.png">
                                </div>
                            </div>
                        </div>
                        <p class="reviewText">'.$donnees['com'].'
                        </p>
                    </div>
                </div>';}
                };
?>

Le code php me permet bien de récupérer mes informations, c'est pourquoi je pense que le problème vient de mon script.



Merci d'avance pour votre aide