如何在 javascript 中使用 {{ form.as_p }}

Question

我有一个问题，我是一名 Django 开发人员，在我的程序中我想编写一个 JavaScript 文件，当我们单击按钮时，脚本文件会创建一个新表单。 JavaScript 文件：

function noid(){
    console.log("on");
    const mydiv = document.querySelector(".my");
    const myform = document.createElement("form");
    mydiv.appendChild(myform);
    myform.insertAdjacentHTML("afterend",
    "{% csrf_token %}")

 

    
    
    
}
document.querySelector("#mybtn").addEventListener("click",noid);

html 文件：

{% extends "base.html" %}
{% load static %}
{% block head %}
<title>create</title>
<link rel="stylesheet" href="{% static "sakht.js" %}">


<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>


<script src="{% static "sakht.js" %}"></script>
{% endblock body %}

我想知道如何将 {% csrf_token %} 块和 {{ quesfrom.as_p }} 块添加到 javascript 文件中。请帮助我。

如何将 {% csrf_token %} 和 {{ quesform.as_p }} 块添加到 javascipt 中？

Answer 1

您不能直接将 Django 模板标签（如

{% csrf_token %}

和

{{ quesform.as_p }}

）包含在单独的 JavaScript 文件中，因为 Django 模板标签在服务器端处理，而 JavaScript 在客户端运行。

您可以将 CSRF 令牌包含在 HTML 的元标记中，然后使用 JavaScript 检索它。同样，您可以使用 AJAX 请求从服务器获取表单 HTML。

以下是如何修改代码以实现此目的的示例：

在 HTML 模板中，将 CSRF 令牌包含在元标记中：

{% block head %}
  <meta name="csrf-token" content="{% csrf_token %}">
  <!-- other head content -->
{% endblock head %}

修改您的 JavaScript 文件以检索 CSRF 令牌并形成 HTML：

function noid() {
    console.log("on");
    const mydiv = document.querySelector(".my");
    const myform = document.createElement("form");

    // Retrieve CSRF token from the meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // Add CSRF token to the form
    myform.insertAdjacentHTML("beforeend", `<input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">`);

    // Fetch form HTML using AJAX
    fetch('/quesform-path/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
    })
    .then(response => response.text())
    .then(data => {
        myform.insertAdjacentHTML("beforeend", data);
        mydiv.appendChild(myform);
    })
    .catch(error => console.error('Error:', error));
}

document.querySelector("#mybtn").addEventListener("click", noid);

将

/quesform-path/

替换为为您的 quesform.as_p 内容提供服务的实际 URL 端点。