python-3.x - Django如何通过单击带有变量的提交按钮从ajax调用views.py中的函数

Question

我在从脚本 html HTML 调用 views.py 中的函数时遇到问题：

<form method="POST" class="msger-inputarea">
    {% csrf_token %}
    <input type="text" name="msg" class="msger-input" placeholder="Enter your message...">
    <button type="submit" name="answer" class="msger-send-btn">Send</button>
  </form>

<script type="text/javascript">
 msgerForm.addEventListener("submit", event => {
      event.preventDefault();

      const msgText = msgerInput.value;

      if (!msgText) return;

      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
      msgerInput.value = "";
      botResponse(msgText);
    });

    function botResponse(rawText) {
        alert(rawText)
        alert('inside ajax')
        $.ajax({
        url: "{% url 'ajaxview' %}",
        method: 'POST',
        data: {'rawText': rawText , csrfmiddlewaretoken: '{{ csrf_token }}'},
        success: function (response) {
            appendMessage(PERSON_NAME, PERSON_IMG, "left", response);
        },
      });
   }

网址.py：

 path('/ajax-test-view', views.myajaxtestview, name='ajaxview')

视图.py：

def myajaxtestview(request):
    input = request.POST.get('rawText')
    return HttpResponse(input)

标签： python-3.xdjangoajaxdjango-modelsdjango-templates

Answer 1

您必须在您的视图中使用JsonResponse( Django Docsmyajaxtestview ) 。

from django.http import JsonResponse

def myajaxtestview(request):
    input = request.POST.get('msg')
    return JsonResponse({"message": "My Ajax Test", input: input})

阿贾克斯：

msgerForm.addEventListener("submit", event => {
    ...
    botResponse($(this).serialize());
});

function botResponse(data) {
    $.ajax({
        url: "{% url 'ajaxview' %}",
        method: 'POST',
        data: data,
        success: function (response) {
            appendMessage(PERSON_NAME, PERSON_IMG, "left", response.message);
        },
    });
}

网址.py：

path('ajax-test-view/', views.myajaxtestview, name='ajaxview')

添加 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>