Использование переменных из Django views.py в JavaScript

Быстрый ответ

Если вы хотите связать переменные контекста Django с JavaScript, просто разместите их внутри тегов <script>, используя синтаксис шаблонов Django. Вот краткое описание процесса:

В views.py:

def my_view(request):
    context = {'my_var': 'Значение'}  # Значением может быть любая переменная!
    return render(request, 'template.html', context)

И в шаблоне template.html:

<script>  
  let myVar = "{{ my_var|escapejs }}";  // Фильтр `escapejs` из Django обеспечивает безопасность 🚀
</script>

Важный совет: Использование фильтра escapejs должно стать вашим неотъемлемым принципом, чтобы предотвратить атаки межсайтового скриптинга (XSS).

[AsideBanner]

Сериализация JSON

Если данные сложные и представляют собой JSON, тег json_script шаблона Django станет незаменимым:

from django.core.serializers.json import DjangoJSONEncoder
import json

def my_view(request):
    context = {
        'my_data': json.dumps(my_complex_data, cls=DjangoJSONEncoder)  // Обратная конвертация в JSON с Django 🦸
    }
    return render(request, 'template.html', context)

И снова в шаблоне:

{{ my_data|json_script:"my-data" }}

<script>
  let myData = JSON.parse(document.getElementById('my-data').textContent);  // И ваши данные уже здесь!
</script>

Таким образом, данные защищены от XSS и готовы к использованию.

Гладкое взаимодействие с Ajax

Для динамического пользовательского интерфейса обмен данными между Django и JavaScript часто осуществляется через Ajax:

// Запрос данных с Django-backend 
fetch('/my-ajax-url/')
  .then(response => response.json())  // Обработка ответа...
  .then(data => {
    // Применение данных в вашем интерактивном сценарии 💃
  });

Это позволяет загрузить данные по мере необходимости, сохраняя при этом безопасность и модульность кода.

Визуализация

Давайте рассмотрим, как передается переменная из Django в JavaScript на примере:

views.py:
context = {'packages': [{'content': 'Компьютерные принадлежности', 'count': '40', 'destination': 'script'}, ...]}

Переменную packages мы отправляем в пункт назначения — блок <script>:

<script>
    let deliveries = JSON.parse("{{ packages|escapejs }}");  // Теперь данные доставлены. И без курьера!
</script>

Packages без проблем прибыли в целости и сохранности и теперь готовы к использованию в вашем сценарии JavaScript.

Чудо динамичного контента

Для обновления содержимого веб-страницы в реальном времени встроенные переменные Django могут быть весьма полезны:

function updateContent() {
  let dynamicData = "{{ django_var }}";  // Добавляем сюда Django
  // Переменная `dynamicData` прямо под вашим контролем 🏰
}

Не забывайте использовать фильтр |escapejs при использовании переменных Django для обеспечения безопасности вашего приложения!

В мире манипуляций с DOM

Использование Django для работы с DOM также просто и понятно:

<div id="info">{{ my_info }}</div>

<script>
  let infoElement = document.getElementById('info');  // "Орел приземлился"
  // `infoElement` готов к использованию! 💥
</script>

Это дает вам возможность создания интерактивного веб-сайта, в котором данные взаимодействуют с пользователями или участвуют в событиях.

Слово о безопасности, коллеги!

При совместном использовании Django и JavaScript помните, что безопасность является ключевым понятием. Одним из основных элементов здесь является защита от XSS. Вот несколько правил:

Базовые правила безопасности: Экранирование и очистка

Вывод переменных в шаблонах должен быть безопасно экранирован. Фильтр escapejs Django гарантирует безопасное внедрение строк в JavaScript.

Если работаем с JSON, используем json_script

При работе с JSON в Django используйте тег json_script. Это поможет избавиться от уязвимостей, вызванных спецсимволами, способными провоцировать внедрение вредоносного кода.

Кусочек о AJAX и безопасности

Работая с AJAX, не забывайте о токенах CSRF Django и всегда проводите проверку входных данных на стороне сервера. Это позволит обеспечить безопасный обмен данными.

Главное правило: Защита от XSS

Создание динамических веб-приложений требует постоянного внимания к безопасности. Используйте встроенные инструменты Django и следуйте лучшим практикам безопасности, чтобы избежать возможных рисков.

Полезные материалы

1. Шаблоны | Документация Django | Django — Алгоритм изучения наследования шаблонов и их использования в Django.
2. Встроенные теги шаблонов и фильтры | Документация Django | Django — Обзор фильтра escapejs, который помогает совместить JavaScript и Django.
3. <script>: Элемент Script – HTML: HyperText Markup Language | MDN — Рекомендации по использованию тега <script> в HTML.
4. Как создать пользовательские теги шаблонов и фильтры | Документация Django | Django — Руководство по созданию пользовательских тегов и фильтров шаблонов, а также по передаче данных.
5. json — Кодировщик и декодировщик JSON — Документация Python 3.12.2 — Официальная документация Python о сериализации JSON.
6. Объекты запроса и ответа | Документация Django | Django — Описание объекта JsonResponse, упрощающего Ajax-взаимодействия в Django.
7. Встроенные теги шаблонов и фильтры | Документация Django | Django — Подход к использованию json_script от Django для безопасной работы с данными.