我无法从我的 views.py 到我的 AJAX 电话得到回应

Question

我在个人项目中工作，在一个部分中我在屏幕上显示卡片，但卡片一次只显示一张。我需要进行 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 页面，我不知道为什么，有人知道我做错了什么吗？

谢谢！！

Answer 1

您正在 return 在您显示的视图片段中渲染 cards.html：

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

渲染生成 html 页面。

你只想returnjson吗？

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

我无法从我的 views.py 到我的 AJAX 电话得到回应

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

python

django

ajax

jquery

response