javascript - 在 Django 表单中使用 .submit(function) 时出现 "Forbidden 403 - CSRF verification failed"

标签 javascript python jquery html django

我一直在使用 Django 开发应用程序,该应用程序有一堆表单,每个表单都在不同的页面中。在第一个 View 中,我只询问用户一个简单的信息,即发送到 Python 的 POST 并使用一些公式。我用来这样做的代码如下所示,并且运行顺利:

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

但是,当我将此代码段添加到代码中时,每次尝试提交表单时,我都会收到“禁止 (403) CSRF 验证失败。请求中止。”错误。根据this ,此错误通常与表单没有 {% csrf_token %} 元素有关。然而,我的表单已经有了这个元素。

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

最佳答案

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

关于javascript - 在 Django 表单中使用 .submit(function) 时出现 "Forbidden 403 - CSRF verification failed",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54313168/

相关文章:

jquery - 伪类 nth-of-type 不适用于特定类

javascript - HTML 选项卡无法正常工作示例

javascript - 在 stop() 后 Div 没有动画

javascript - 如何在div内制作垂直自动滚动图像?

python - Setuptools 循环 dependency_links

javascript - 使用 Python 自动登录我的本地互联网页面

Javascript 计数器 - 如何添加更多值

javascript - 使用原型(prototype)缓存 AJAX 查询结果

python - 为匿名用户提供与注册用户相同的功能

javascript - 将鼠标悬停在 div 1 下的 div 2 上时更改 div 1