Я не могу получить ответ от моего views.py на мой AJAX вызов

Я работаю в персональном проекте и в одной секции я показываю карточки на экране, но карточки показываются только по одной за раз. Мне нужно было сделать Ajax вызов, и он работает хорошо, но единственное, что я не могу получить ответ от моего представления.

Вот мой вызов Ajax: 

$('#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)
          }
        })
      })

И я отправляю это из моего представления, которое является списком объектов:

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

Когда я нажимаю на кнопку, данные отправляются в views.py нормально, но когда я пытаюсь показать эти данные в консоли, он показывает мне следующее:

<!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/bootstrap@5.1.0/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/bootstrap@5.1.0/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>

Это буквально ответ, который я получаю в консоли, и это моя HTML страница, я понятия не имею почему, кто-нибудь знает, что я делаю неправильно?

Спасибо!!!

вы возвращаете рендеринг cards.html в фрагменте представления, который вы показываете: 

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

Рендер генерирует html-страницу.

Вы просто хотите вернуть json? 

from django.http import JsonResponse
return JsonResponse({'duo_filter': shuffled_list})
Вернуться на верх