使用 JavaScript 时 Django POST 方法不起作用答案

【问题标题】：Django POST method is not working when using JavaScript使用 JavaScript 时 Django POST 方法不起作用
【发布时间】：2022-01-05 21:59:28
【问题描述】：

我正在尝试在提交表单时显示一个 div。它在提交表单时显示 div，而未提交表单。这里使用 POST 方法。 JavaScript 用于显示 div。

html 文件：

                    <form method="POST" name="myFirstForm" id="chform">
                        {% csrf_token %}
                        <input type="hidden" name="details_id" value="{{details.id}}"/>
                        <input type="hidden" name="details_user_id" value="{{details.user_id}}"/>
                        <input type="hidden" name="user_id" value="{{user.id}}"/>
                        <input type="submit" class="btn btn-danger" id="chat" onclick="return myFunction()" value="Chat Now">
                    </form>
                   <div class="page-content page-container" id="page-content" style="display:none"></div>

JavaScript：

<script>
 document.forms['myFirstForm'].addEventListener('submit', function(event) {
// Do something with the form's data here
this.style['display'] = 'none';
event.preventDefault();
  });
   function myFunction() {
    var x = document.getElementById("page-content");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

</script>

views.py：

    if request.method=='POST':
        jid = request.POST.get('details_id')
        print(jid)
        cjid = request.POST.get('details_user_id')
        print(cjid)
        userid = request.POST.get('user_id')
        print(userid)

如果我不想显示 div 并删除 JavaScript 代码，POST 方法可以工作。有人可以提出解决此问题的解决方案吗？

【问题讨论】：

标签： javascript python-3.x django post

【解决方案1】：

您是否考虑过异步 JavaScript 和 XML (AJAX)？听起来你想要异步 JS 功能（或者我理解不正确）。

所以在你的提交按钮中，你可以让它调用一个 AJAX 函数，如下所示：

<button type="submit" id="chat" data-url="{% url 'url_to_your_view_handling_the_post' %}" value="Chat Now"></button>

然后你的onclick 函数：

$(document).on('click', '#chat', function (e) {

    $.ajax({
        type: 'POST',
        url: $(this).data('url'),
        data: {
            // add any other HTML data attributes in this dictionary
            csrfmiddlewaretoken: getCookie('csrftoken'),
        },
        success: function (json_response) {
            // Successful AJAX response handling routine here
            // Display your div
            var x = document.getElementById("page-content");
            if (x.style.display === "none") {
                x.style.display = "block";
            }
            else {
                x.style.display = "none";
            }
        },
        error: function (xhr, errmsg, err) { }
    });
})

因此，您在按钮中定义的 url url_to_your_view_handling_the_post 上的视图将处理 POST 方法并返回包含您想要的任何数据的 JSON 响应。如果成功返回，则运行 AJAX 函数中的成功例程。

发送 csrf 令牌并不是非常简单，我建议您参考 this thread 了解更多关于 getCookie('csrftoken') 功能的信息。

注意：这是 AJAX 的 jquery 实现，因此您还需要在模板中包含 jquery。

【讨论】：

这是使用 jQuery，所以如果他们想使用您展示的这个函数进行 AJAX 调用，问题的作者将需要包含这一点
$(this).data('url') 是否代表biutton标签中的data-url -@ Tine S Tsengwa
是的。并且 url 链接（通过 urls.py）到处理 POST 的视图。

【解决方案2】：

如果你想提交表格，那么你不应该打电话给event.preventDefault();。这基本上告诉 js 捕获submit 事件并阻止事件的默认行为，即在您的情况下提交表单。

【讨论】：