单击提交时如何从 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);
          }