Передача данных в JavaScript в шаблоне Django

Атрибуты данных для простых значений
Теги шаблонов не работают в коде JavaScript.
Пример неработающего кода

<script>
const name = "{{ name }}";
</script>


Обычно это не работает, поскольку Django выполняет HTML-экранирование значения.


Неправильное обращение к параметрам шаблона приведет к двум моментам:
1) Поломается передача параметров и код не заработает
2) Можно внести уязвимость в код, которая позволит внести зловредный код в js.
Передача простых значений через атрибуты данных
Атрибуты данных позволяют хранить дополнительную информацию о стандартных семантических элементах HTML без других надстроек, например нестандартные атрибуты или дополнительные свойства в DOM. Любой атрибут любого элемента, имя атрибута которого начинается с, data-является атрибутом данных.
Пример определения атрибута

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>
Пример считывания атрибута

const article = document.querySelector("#electric-cars");
// Или
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
currentScript
Если поместить атрибуты в тег script можно использовать свойство Document.currentScript. Оно возвращает <script> элемент, сценарий которого в данный момент обрабатывается и не является модулем JavaScript. Его datase свойство будет содержать переданные атрибуты в виде строк.
Пример определения атрибута с тегом шаблона

<script data-name="{{ name }}">
    const data = document.currentScript.dataset;
    const username = data.name;
</script>
Пример определения атрибута с тегом шаблона

{% load static %}
<script src="{% static 'index.js' %}" defer data-name="{{ name }}"></script>
Преобразование в camelCase
Обратите внимание! Если атрибут имеет имя
data-full-name="{{ full_name }}"

Обращение к нему будет выглядеть вот так
data.fullName

Имя атрибута преобразуется согласно camelCase правилам
Другие типы значений атрибутов

dataset содержит только строки, поскольку все значения атрибутов HTML являются строками. Если вы передаете в JavaScript число, дату или другой простой тип, вам необходимо будет его проанализировать. Например, представьте, что вы передаете целое число:

В тег <script>можно помещать любое количество атрибутов данных.
Пример определения атрибута с тегом шаблона

{% load static %}
<script src="{% static 'index.js' %}"
        defer
        data-settings="{{settings }}"
        data-configuration="{{configuration}}"
        data-options="{{options}}"
        ></script>
Использовать json_scriptдля сложных значений
Если вам нужно передать словарь или список в JavaScript, используйте json_script фильтр Django
ОПИСАНИЕ кода
В переменной model указывается модель, по которой строится форма. В кортеже fields указываются поля для отображения в форме. В словаре help_text заносится описание полей.
Построение форм не по модели

from django import forms
 
class PostForm(forms.Form):
    title = forms.CharField()
    description = forms.CharField()
ОПИСАНИЕ кода
В классе указываются необходимые поля, которые являются объектами класса forms. Чтобы обработать форму, нужно создать ее экземпляр в отображении views для URL-адреса. Там же можно создать логику обработки формы.
Пример обработки формы во views

from .forms import PostForm

def post_edit(request, post_id):
    template = 'posts/create_post.html'
    post = get_object_or_404(Post, id=post_id)
    if request.method == 'POST':
        form = PostForm(request.POST or None)
        if form.is_valid():
            post.save()
            return redirect('posts:post_detail', post_id=post.id)
    form = PostForm(request.POST or None)
    context = {'post': post, 'form': form}
    return render(request, template, context)
ОПИСАНИЕ кода
Первый раз страница придет с GET-запросом, он создаст пустой экземпляр формы и поместит его в контекст шаблона для отображения.

При отправки формы POST-запросом, представление снова создаст экземпляр формы и заполнит его данными из запроса: это называется «привязка данных к форме» form = PostForm(request.POST or None)

Вызывается метод формы is_valid(); если он не равен True, возвращаемся к шаблону с формой. В HTML-форме будут заполнены поля, где их можно будет отредактировать по мере необходимости.

Если is_valid()is True, происходит сохранение формы в базу данных. В этом месте также можно обработать данные перед сохранением формы, например автоматически сохранить users, если пользователь авторизован post.author = request.user.

Отображение формы на странице HTML

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>
ОПИСАНИЕ кода
Все поля формы и их атрибуты будут распакованы в HTML-разметку из языка шаблонов Django. {{ form }}

Django поставляется с простой в использовании защитой от подделок межсайтовых запросов. При отправке формы через POSTс включенной защитой CSRF вы должны использовать csrf_token тег шаблона.