I can't get response from my views.py to my AJAX call

I'm working in a personal project and in one section I'm showing cards on the screen, but the card only show one at time. I needed to do a Ajax call and it's working good, but the only thing that I can't get is the response from my view.

This is my Ajax call:

$('#accept').on('click', function() {
        var accept_value = $('#accept').val();
        $.ajax({
          url: '/cards/',
          type: 'POST',
          data: {'duo_status': accept_value},
          headers: { "X-CSRFToken": "{{ csrf_token }}" },

          success: function(data) {
            console.log('Accepted: success')
            console.log(data)
          }
        })
      })

And I'm sending this from my view, that is a list of objects:

return render(request, 'cards.html', {'duo_filter': shuffled_list})

When I click the button, the data is sent to the views.py normally, but when I try to show this data in the console, it shows me this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>Cards</title>
</head>
<body>
  
  <div style="display: flex;">
    
    <strong style="padding: 0 5px;"></strong>
    <p id="card_username"></p>
  </div>

  <!--BOTÕES (ACEITAR/RECUSAR)-->
  <div style="display: flex;">
    <button style="margin: 10px 20px; background-color: red;"
    id="refuse"
    value="refuse,">
      Recusar
    </button>
    <button style="margin: 10px 20px; background-color: green;"
    id="accept"
    value="accept,">
      Aceitar
    </button>
  </div>
  


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      
      $('#refuse').on('click', function() {
        var refuse_value = $('#refuse').val();
        $.ajax({
          url: '/cards/',
          type: 'post',
          data: {'duo_status': refuse_value},
          headers: { "X-CSRFToken": "mfMSEGkKK22vPYy9Ut2DnrVjonr5oPerERO0q6CHrQrUiqpIeK9xuYUb8Ob2cz7y" },

          success: function(data) {
            console.log('Refused -> success')

          }
        })
      })

      $('#accept').on('click', function() {
        var accept_value = $('#accept').val();
        $.ajax({
          url: '/cards/',
          type: 'POST',
          data: {'duo_status': accept_value},
          headers: { "X-CSRFToken": "mfMSEGkKK22vPYy9Ut2DnrVjonr5oPerERO0q6CHrQrUiqpIeK9xuYUb8Ob2cz7y" },

          success: function(data) {
            console.log('Accepted -> success')
            console.log(data)
          }
        })
      })
    })
  </script>
</body>
</html>

This is literally the response I get in my console and it is my HTML page, I have no idea why, anyone knows what am I doing wrong?

Thanks!!

Solution

you are returning render of cards.html in the view snippet you show:

return render(request, 'cards.html', {'duo_filter': shuffled_list})

Render generates an html page.

Do you just want to return json?

from django.http import JsonResponse
return JsonResponse({'duo_filter': shuffled_list})