Змінні шаблону Django та Javascript

Коли я візуалізую сторінку за допомогою рендерера шаблону Django, я можу передати змінну словника, що містить різні значення, щоб керувати ними на сторінці за допомогою {{ myVar }}.

Чи є спосіб отримати доступ до тієї ж змінної у Javascript (можливо, використовуючи DOM, я не знаю, як Django робить доступними змінні)? Я хочу мати змогу шукати деталі за допомогою пошуку AJAX на основі значень, що містяться у переданих змінних.

{{variable}}Замінюється безпосередньо в HTML. У джерела перегляду; це не "змінна" чи щось подібне. Це просто виведений текст.

Сказавши це, ви можете помістити таку заміну у свій JavaScript.

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
</script>

Це дає вам "динамічний" javascript.

ПОПЕРЕДЖЕННЯ Перевірте білет №17419 для обговорення щодо додавання подібного тегу до ядра Django та можливих уразливостей XSS, введених за допомогою цього тегу шаблону з даними, створеними користувачем. Коментар Amacneil обговорює більшість проблем, які виникають у квитку.

Я думаю, що найбільш гнучким і зручним способом цього є визначення шаблонного фільтра для змінних, які ви хочете використовувати в JS-коді. Це дозволяє переконатися, що ваші дані належним чином виконані, і ви можете використовувати їх зі складними структурами даних, такими як dictі list. Тому я пишу цю відповідь, незважаючи на те, що є прийнята відповідь з великою кількістю відгуків.

Ось приклад шаблонного фільтра:

// myapp/templatetags/js.py

from django.utils.safestring import mark_safe
from django.template import Library

import json


register = Library()


@register.filter(is_safe=True)
def js(obj):
    return mark_safe(json.dumps(obj))

Цей фільтр шаблонів перетворює змінну в рядок JSON. Ви можете використовувати його так:

// myapp/templates/example.html

{% load js %}

<script type="text/javascript">
    var someVar = {{ some_var | js }};
</script>

Рішення, яке працювало для мене, - це використання прихованого поля введення в шаблоні

<input type="hidden" id="myVar" name="variable" value="{{ variable }}">

Потім отримуючи значення в JavaScript таким чином,

var myVar = document.getElementById("myVar").value;

Станом на Django 2.1, новий вбудований тег шаблону був введений спеціально для цього випадку використання: json_script .

https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json-script

Новий тег надійно серіалізує значення шаблону та захищає від XSS.

Уривок з документа Django:

Безпечно виводить об’єкт Python як JSON, загорнутий у тег, готовий до використання з JavaScript.

Ось що я роблю дуже легко: я змінив файл base.html для свого шаблону і поставив його внизу:

{% if DJdata %}
    <script type="text/javascript">
        (function () {window.DJdata = {{DJdata|safe}};})();
    </script>
{% endif %}

тоді, коли я хочу використовувати змінну у файлах javascript, я створюю словник DJdata і додаю його до контексту json: context['DJdata'] = json.dumps(DJdata)

Сподіваюся, це допомагає!

Щодо словника, то найкраще спочатку кодувати JSON. Ви можете використовувати simplejson.dumps () або якщо ви хочете конвертувати з моделі даних в App Engine, ви можете використовувати encode () з бібліотеки GQLEncoder.

Я зіткнувся з подібним питанням і відповідь, запропонована С.Лоттом, працювала на мене.

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}"
</script>

Однак я хотів би зазначити тут головне обмеження щодо впровадження . Якщо ви плануєте помістити свій код JavaScript в інший файл і включити цей файл у свій шаблон. Це не спрацює.

Це працює лише тоді, коли ви основний шаблон і код JavaScript в одному файлі. Можливо, команда джанго може вирішити це обмеження.

Я теж боровся з цим. На поверхні здається, що вищезазначені рішення повинні працювати. Однак архітектура django вимагає, щоб кожен файл html мав власні відтворені змінні (тобто {{contact}}надається contact.html, а {{posts}}переходить у наприклад index.htmlтощо). З іншого боку, <script>мітки з'являються після того , як {%endblock%}в , base.htmlз якого contact.htmlі index.htmlуспадковують. Це в основному означає, що будь-яке рішення в тому числі

<script type="text/javascript">
    var myVar = "{{ myVar }}"
</script>

буде невдалим, оскільки змінна та сценарій не можуть співіснувати в одному файлі.

Просте рішення, яке я врешті-решт придумав і працював для мене, полягав у тому, щоб просто обернути змінну тегом з id і пізніше вказати на неї у файлі js, як-от так:

// index.html
<div id="myvar">{{ myVar }}</div>

і потім:

// somecode.js
var someVar = document.getElementById("myvar").innerHTML;

і просто включити <script src="static/js/somecode.js"></script>в , base.htmlяк зазвичай. Звичайно, мова йде лише про отримання вмісту. Щодо безпеки, просто дотримуйтесь інших відповідей.

Для об’єкта JavaScript, що зберігається у полі Django як текст, який знову повинен стати об’єктом JavaScript, динамічно вставленим у сценарій на сторінці, потрібно використовувати обидва escapejsта JSON.parse():

var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");

Django escapejsобробляє цитування належним чином і JSON.parse()перетворює рядок назад в JS-об'єкт.

Зауважте, що якщо ви хочете передати змінну зовнішньому скрипту .js, вам потрібно передувати тег сценарію іншим тегом сценарію, який оголошує глобальну змінну.

<script type="text/javascript">
    var myVar = "{{ myVar }}"
</script>

<script type="text/javascript" src="{% static "scripts/my_script.js" %}"></script>

data визначається в перегляді, як зазвичай в get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context

Я використовую цей спосіб у Django 2.1 і працюю для мене, і цей спосіб безпечний (довідковий) :

Сторона Джанго:

def age(request):
    mydata = {'age':12}
    return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})

Html сторона:

<script type='text/javascript'>
     const  mydata = {{ mydata_json|safe }};
console.log(mydata)
 </script>

ви можете зібрати весь сценарій, де ваша змінна масив оголошена в рядку,

views.py

    aaa = [41, 56, 25, 48, 72, 34, 12]
    prueba = "<script>var data2 =["
    for a in aaa:
        aa = str(a)
        prueba = prueba + "'" + aa + "',"
    prueba = prueba + "];</script>"

що створить рядок наступним чином

prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"

після цього рядка ви повинні надіслати його до шаблону

views.py

return render(request, 'example.html', {"prueba": prueba})

у шаблоні ви отримуєте його та інтерпретуєте його літературним чином як htm-код, безпосередньо перед кодом javascript, де вам це потрібно, наприклад

шаблон

{{ prueba|safe  }}

і нижче - решта вашого коду, майте на увазі, що змінна, яка використовується у прикладі, - це data2

<script>
 console.log(data2);
</script>

таким чином ви збережете тип даних, що в даному випадку є розташуванням

Є дві речі, які працювали для мене всередині Javascript:

'{{context_variable|escapejs }}'

та інше: У views.py

from json import dumps as jdumps

def func(request):
    context={'message': jdumps('hello there')}
    return render(request,'index.html',context)

і в html:

{{ message|safe }}