I have this code that gets the data from postgis and but when launching my page my markers won't show, even though there is no error in the console. the problem seemes to come from couche.on('data:loaded', function (e) since apparently it's not able to get the loaded data and because when i do couche.addTo(maCarte) directly the markers show. And i tried it in a another example with var couche = new L.GeoJSON.AJAX("data/markers.geojson", { and it works. Another problem is when i enter a variable to select a specefic marker i always get the same error Uncaught SyntaxError: Unexpected token < in JSON at position 2 even though i checked my php file and it's fine and show the results when i launched directly <a href="php/lecture.php?var='2021-09-27'">Exécution du script PHP </a>it happens in this code only when i add a variable and when there is none and the variable is null, the data is downloaded without any problem, so i don't know where the problem is coming from.
Can anyone please help me find a solution ?

            function loadData() {
            console.log('php/lecture.php?var=' + variable )
            $.ajax({url:'php/lecture.php?var=' + variable  ,
            success: function(response){                        
            data = JSON.parse(response)
            console.log(data)                        
                    console.log('Données téléchargées : ' + response.length / 1000000 + 'Mo')                                                
                    drawEntities(data)
                    maCarte.fitBounds(couche.getBounds())
                    }
                    })
                    }  
                    couche = new L.GeoJSON(data.features, {
                    onEachFeature: function (feature, layer) {                                      
                    layer.bindPopup('<h4>date_debut: ' + feature.properties.date_debut+ 
                    '</h4>')
                },
                    pointToLayer: createCircleMarker
                });
                    couche.on('data:loaded', function (e){
                    function makeGroup(color) {
                    return new L.MarkerClusterGroup({
                    iconCreateFunction: function(cluster) {
                    return new L.DivIcon({
                    iconSize: [20, 20],
                    html: '<div style="text-align:center;background:'+color + '">' + 
                    cluster.getChildCount() + '</div>'
                    });
                    }
                    }).addTo(maCarte);
                    }
                    var groups = {
                    TR: makeGroup('red'),
                    DE: makeGroup('green'),
                    CA: makeGroup('orange'),
                    CO: makeGroup('blue')
                    };
                    e.target.eachLayer(function(layer) {
                    groups[layer.feature.properties.type].addLayer(layer);
                    });
                    });
                    }