在 Django 表单中使用 .submit(function) 时出现“禁止 403 - CSRF 验证失败”答案

【问题标题】："Forbidden 403 - CSRF verification failed" when using .submit(function) in Django form在 Django 表单中使用 .submit(function) 时出现“禁止 403 - CSRF 验证失败”
【发布时间】：2019-01-22 17:05:31
【问题描述】：

我一直在使用 Django 开发具有一堆表单的应用程序，每个表单位于不同的页面中。在第一个视图中，我只是询问用户一个简单的信息，即 POST 发送到 Python 并用于一些公式。我以前这样做的代码如下所示，运行流畅：

<html>
<head>
    <title>Data</title>
</head>

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'app/content/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'app/content/custom.css' %}">

<script src="{% static 'app/scripts/jquery-1.10.2.min.js' %}"></script>
<script src="{% static 'app/scripts/jquery.validate.js' %}"></script>
<script src="{% static 'app/scripts/jquery.maskedinput.min.js' %}"></script>
<script src="{% static 'app/scripts/custom.js' %}"></script>

{% if error == 404 %}
<label>Who are you? Go away!</label>
<br>
{% endif %}
Welcome! Give me your data!
<body>
    <form action="/search/" method="post" id="myPrettyForm">
        {% csrf_token %}
        <input type="text" name="q" id="q">
        <input type="submit" value="Go!">
    </form>
</body>
<script type="text/javascript">

    $("#q").mask("00000000000");

</script>
</html>

正如我所说，这段代码运行良好。但是，我想添加一个功能，其中，一旦我单击“提交”，q 输入字段就会被禁用。为此，我尝试将这段代码添加到上面的脚本中：

$("#myPrettyForm").submit(function () {
    $("#myPrettyForm:input").prop("disabled", true);
});

但是，当我将此 sn-p 添加到我的代码中时，每次我尝试提交表单时，都会收到“Forbidden (403) CSRF verification failed. Request aborted.”错误。根据this，此错误通常与没有{% csrf_token %} 元素的表单有关。但是，我的表单已经有了这个元素。

那么我在这里做错了什么？如果我使用错误的方法来阻止我的用户在提交表单后写入输入，那么其他方法可以我用？

【问题讨论】：

您可能会在提交之前进行更改。 csrf 是一个令牌，每次生成表单时都会生成一个随机数（以阻止虚假数据）。您可能需要何时修改表单。提交后几秒钟看看是否可以修改。或者通过后端进行。或者如上所述，也许你不再发送令牌了
尝试在 jquery 函数中通过 id q 禁用可能您正在通过 input 类在服务器端 request.POST 禁用 csrf 隐藏输入
@Ahtisham 你是什么意思？
尝试将其设置为只读$("#fieldName").attr('readonly','readonly');
您禁用了所有输入，包括包含 CSRF 令牌的隐藏输入。您应该只禁用q 输入。

标签： javascript python jquery html django

【解决方案1】：

request.POST 是一个包含表单数据的字典。禁用输入类将使包括 csrf_token 在内的所有输入都被禁用。正确的方法是通过 id 引用组件并将组件保持为“只读”，就像您所做的 $("#fieldId").prop("readonly", true);

【讨论】：