sending value form views.py to html using jsonresponse

Question

i want to get a value from my view to html using jsonreponse, the problem is that my code work fine in views.py and i can print the data , but when i call the data in ajax it doesn't work it just give 0 as result ( because i declare round_surf = 0 at the beginning )

this the views.py code :

def resultat (request):
    round_surf = 0
    info = parametre.objects.filter(pk=1).values()[0]
    SEUIL = info['PAR_SEUIL']
    COLOR = info['PAR_COLOR']
    NBR_PAQ = info['PAR_NBRE_PAQUET']
    SUR = info['PAR_SUR']
    if request.method=="POST":
        if request.POST.get('captured_image'):
            captured_image = request.POST.get('captured_image')
            imgstr = re.search('base64,(.*)', captured_image).group(1)
            imgstr = base64.b64decode(imgstr)
            tempimg = io.BytesIO(imgstr)
            im = Image.open(tempimg)
            image = ImageOps.grayscale(im)
            # Appliquer un seuil pour convertir les pixels en valeurs binaires
            threshold = 100 # Choisir un seuil approprié
            image = image.point(lambda x: 0 if x < threshold else 1, '1')
            # Récupérer la longueur et la largeur de l'image
            width, height = image.size
            # Calculer le nombre total de pixels
            total_pixels = width * height
            image = image.convert('RGB')
            # Initialiser le compteur de pixels noirs
            black_pixels = 0
        
            # Parcourir chaque pixel de l'image
            for x in range(width):
                for y in range(height):
                    # test if the pixel is white
                    if image.getpixel((x, y)) == (255, 255, 255):
                        black_pixels += 1
            
            
            surf_peaux =  float(SUR)*float(black_pixels)/float(total_pixels)
            round_surf = float(round (surf_peaux * 4) / 4)
            print(f"La surface de la peaux est : {surf_peaux} p²")
            print(f"La surface de la peaux arrondie est : {round_surf} p²")
            image.show()
    data = {
        'round_surf':round_surf,
    }
    print(data)
    return JsonResponse(data)

and this is my script in html file :

<script>
            function fetchData() {
                const resultatElement = document.getElementById('resultatTXT');
                $(document).ready(function() {
                    $.ajax({
                     
                        url: '{% url "resultat" %}',
                        success: function (data) {
                        alert("SUCCESS");
                        },
                        error: function(data){
                           alert("ERROR");
                        }
                    });
            });
        }
        
        </script>

EDIT : and this is the script to send the image to the views :

 <script type="text/javascript">
            $(document).on('submit','#THE_FORM',function(e){
                e.preventDefault();
                $.ajax({
                    type:'POST',
                    url:'{% url "resultat" %}',
                    data:
                    {   
                        captured_image:$("#captured_image").val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                    },
                                      
                });
            });
        </script>

so, how to send my calculated var ( round_surf ) to html using ajax and jsonresponse