Django开发者求助：如何在JS中添加{% csrf_token %}与{{ quesform.as_p }}

核心问题 #

静态JavaScript文件不会经过Django模板引擎解析，直接在JS里写{% csrf_token %}或{{ quesform.as_p }}是无效的。必须先在HTML模板中把这些模板渲染后的内容传递给JS，再在JS中调用使用。

解决方案步骤 #

1. 在HTML模板中传递所需内容给JS #

修改你的HTML文件，在引入静态JS之前，把CSRF Token和quesform的HTML内容暴露给JS：

{% extends "base.html" %}
{% load static %}
{% block head %}
<title>create</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200&display=swap" rel="stylesheet">
{% endblock head %}
{% block body %}

<div class='container bg-ligth rounded-3 my'>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">submit</button>
    </form>

    <button class="Mybtn" id="mybtn">Add</button>
    <form method="post">
        {% csrf_token %}
        {{ quesform.as_p }}
        <button type="submit">submit</button>
    </form>
</div>

<!-- 传递CSRF Token和表单HTML给JS -->
<script>
    // 存储CSRF Token
    window.csrfToken = "{{ csrf_token }}";
    // 存储quesform的HTML结构，用escapejs转义特殊字符避免语法错误
    window.quesFormHtml = `{{ quesform.as_p|escapejs }}`;
</script>
<script src="{% static "sakht.js" %}"></script>
{% endblock body %}

2. 修改JavaScript文件，使用传递过来的内容 #

更新sakht.js文件，从全局变量中获取内容并动态创建表单：

function noid(){
    console.log("on");
    const mydiv = document.querySelector(".my");
    
    // 创建新表单并设置POST方法
    const myform = document.createElement("form");
    myform.method = "post";
    
    // 添加CSRF Token隐藏字段
    const csrfInput = document.createElement("input");
    csrfInput.type = "hidden";
    csrfInput.name = "csrfmiddlewaretoken";
    csrfInput.value = window.csrfToken;
    myform.appendChild(csrfInput);
    
    // 插入quesform的表单字段
    myform.innerHTML += window.quesFormHtml;
    
    // 添加提交按钮
    const submitBtn = document.createElement("button");
    submitBtn.type = "submit";
    submitBtn.textContent = "submit";
    myform.appendChild(submitBtn);
    
    // 将新表单添加到页面容器
    mydiv.appendChild(myform);
}
document.querySelector("#mybtn").addEventListener("click",noid);

替代方案：使用隐藏模板元素 #

如果你不想用全局变量，也可以在HTML中渲染一个隐藏的表单模板，通过克隆模板来创建新表单：

<!-- 在HTML中添加隐藏的表单模板 -->
<div id="ques-form-template" style="display: none;">
    <form method="post">
        {% csrf_token %}
        {{ quesform.as_p }}
        <button type="submit">submit</button>
    </form>
</div>

对应的JS代码：

function noid(){
    console.log("on");
    const mydiv = document.querySelector(".my");
    // 克隆隐藏模板中的表单
    const formTemplate = document.querySelector("#ques-form-template");
    const newForm = formTemplate.children[0].cloneNode(true);
    mydiv.appendChild(newForm);
}
document.querySelector("#mybtn").addEventListener("click",noid);

关键说明 #

• 静态JS无法直接解析Django模板标签，必须通过HTML模板传递渲染后的内容。
• CSRF Token是Django POST请求的必填项，缺失会触发403权限错误。
• 使用escapejs过滤器或克隆DOM元素的方式，可避免HTML特殊字符导致JS语法报错。

内容的提问来源于stack exchange，提问作者MohammadAminGHS