單擊提交時如何從 Django 中的數據庫中獲取數據？

Question

只有在單擊提交而不是在頁面加載時，我才需要在 HTML 上獲取數據庫對象。 我目前有一個 AJAX 腳本在同一個表單上運行，當單擊提交時，它將在文本框中輸入的文本返回到 HTML 上。 我希望保留此功能並添加一個新的數據檢索功能。 以下是我正在使用的一些代碼片段：

視圖.py

@csrf_exempt
def chat(request):
    resps   = Responses.objects.all()
    context = {'resps' : resps}
    return render(request, "chat.html", context)

網址.py

path('chat/', views.chat,  name='chat'),

聊天.html

<form id="testForm" name="test-form" class="test-form" action="" method="POST">{% csrf_token %}
  <input id="texting" name="texting" type="text" class="test-text" placeholder="Test here"/>
  <div class="footer">
    <input type="submit" value="SEND">
</form>
</div>
{% for r in resps %}
<div>
  <p>{{r.response}}</p>
</div>
{% endfor %}

................................................

<script type="text/javascript">
      $(document).on('submit','#testForm', function(e){
        e.preventDefault();

        $.ajax({
          type  : 'POST',
          url   : '/chat/',
          data  :{
            text : $('#texting').val(),
            csrfmiddlewaretoken: $('input[text=csrfmiddlewaretoken]').val()
          },
          success : function(){
            // alert("Done!");
            document.getElementById("userSpeaks").innerHTML = document.getElementById('texting').value;
          }
        });
      });
  </script>

任何幫助，將不勝感激。 我只需要在每次單擊提交按鈕時打印 model 對象，而不是在頁面加載時自動打印。 提前致謝。

Answer 1

請換行

csrfmiddlewaretoken: $('input[text=csrfmiddlewaretoken]').val()

至

csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

Answer 2

因此，如果您希望通過 ajax 發送查詢列表，則必須將其發送為 json object

from django.http import JsonResponse
from django.core.serializers import serialize

@csrf_exempt
def chat(request):
    data = {
            'resps': serialize("json", Responses.objects.all())
        }
        
    return JsonResponse(data)

你的success看起來像這樣

success : function(data){
            // alert("Done!");
            resps = JSON.parse(data.resps);
            var htmldata=""
            for(var x in resps){
            htmldata+="<p>"+resps[x].fields.xyz+"</p>"
            }


            $("#userSpeaks").html(htmldata);
          }