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

Posted 2023-02-24

【中文标题】Django如何通过单击带有变量的提交按钮从ajax调用views.py中的函数

【英文标题】：Django How to call a function in views.py from ajax by clicking submit button with variable

【发布时间】：2021-06-23 00:50:38

【问题描述】：

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

<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);
        ,
      );
   

URL.py：

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

VIEWS.py：

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

【参考方案1】：

你必须在你的视图中使用JsonResponse(Django Docs) myajaxtestview。

from django.http import JsonResponse

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

AJAX：

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>

【讨论】：

我试图打印（输入）但它没有打印。脚本和网址是否正确？ @NKSM

@Mohanbaabu，我编辑了我的答案 > botResponse($(this).serialize());

input = request.POST.get('rawText') ，这里我需要将 'rawText' 更改为 'data' @NKSM

const msgText = msgerInput.value;机器人响应（msgText）；我需要将参数传递给下一个函数@NKSM 感谢提前

@Mohanbaabu，在你看来input = request.POST.get('msg')