Django模板变量和Javascript

当我使用Django模板呈现器呈现页面时，我可以传入一个包含各种值的字典变量，以便使用

{{myVar}

在页面中操作它们

---

有没有一种方法可以访问Javascript中的同一个变量（可能是使用DOM，我不知道Django是如何让变量可以访问的）？我希望能够使用基于传入变量中包含的值的AJAX查找来查找详细信息。

将

{{variable}

直接替换到HTML中。做一个查看源代码；它不是一个“变量”或类似的东西。它只是渲染文本

话虽如此，您可以将这种替换放入JavaScript中

var a=“{someDjangoVariable}}”；

---

这将为您提供“动态”javascript。

对于字典，您最好先编码为JSON。您可以使用simplejson.dumps（），或者如果您想从App Engine中的数据模型转换，可以使用GQLCoder库中的encode（）

对我有效的解决方案是使用模板中的隐藏输入字段

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

---

注意查看有关向Django core添加类似标记的讨论记录，以及使用此模板标记和用户生成的数据可能引入的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>

//myapp/templates/example.html
{%load js%}
var someVar={some_var|js}；

以下是我很容易做到的： 我修改了模板的base.html文件，并将其放在底部：

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

{%if-DJdata%}
（函数（）{window.DJdata={{DJdata | safe}}；}）（）；
{%endif%}

然后，当我想在javascript文件中使用变量时，我创建了一个DJdata字典，并通过一个json将其添加到上下文中：

context['DJdata']=json.dumps（DJdata）

---

希望有帮助

我面临着类似的问题，S.洛特提出的答案对我有效

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

var a=“{someDjangoVariable}}”

然而，我想在此指出主要的实施限制。 如果您计划将javascript代码放在不同的文件中，并将该文件包含在模板中。这行不通

只有当主模板和javascript代码位于同一文件中时，这才有效。

---

django团队可能可以解决这个限制。

对于作为文本存储在django字段中的JavaScript对象，它需要再次成为动态插入到页面脚本中的JavaScript对象，您需要同时使用

escapejs

和

JSON.parse（）

：

---

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>

---

我也一直在努力解决这个问题。从表面上看，上述解决方案似乎应该奏效。但是，django体系结构要求每个html文件都有自己的呈现变量（即，

{contact}

呈现到

contact.html

，而

{{posts}}

呈现到例如

index.html

等等）。另一方面，

标记出现在

base.html

中的

{%endblock%}

之后，从中继承

contact.html

和

index.html

。这基本上意味着任何解决方案包括

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

像往常一样，只需在

base.html

中包含

。

---

当然，这只是为了获取内容。关于安全问题，只需遵循其他答案即可

从Django 2.1开始，专门为此用例引入了一个新的内置模板标记：

json\u脚本

新标记将安全地序列化模板值并防止XSS

Django文件摘录：

将Python对象安全地输出为JSON，并封装在标记中， 可以与JavaScript一起使用

---

可以在字符串中声明数组变量的位置组装整个脚本，如下所示：

views.py

在模板中，您接收它并以文学的方式将其解释为htm代码，例如，就在您需要它的javascript代码之前

模板

下面是代码的其余部分，请记住示例中使用的变量是data2

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

console.log（data2）；

---

这样，您将保留数据类型，在本例中，这是一种安排

在Javascript中，有两件事对我很有用：

'{{context_variable|escapejs }}'

及其他： In 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 }}

---

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

const mydata={{mydata_json|safe}；
console.log（mydata）

我发现我们可以将Django变量传递给javascript函数，如下所示：-

<button type="button" onclick="myJavascriptFunction('{{ my_django_variable }}')"></button>
<script>
    myJavascriptFunction(djangoVariable){
       alert(djangoVariable);
    }
</script>

myJavascriptFunction（djangoVariable）{
警报（django变量）；
}

使用内置模板标记，从Django 2.1+实现了一种非常简单的方法。一个简单的例子是：

在模板中声明变量：

{{variable | json_脚本：'name'}}

然后调用

Javascript中的变量：

'{{context_variable|escapejs }}'

var js_variable=JSON.parse（document.getElementById（'name'）.textContent）

它是poss
{{ prueba|safe  }}

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

'{{context_variable|escapejs }}'

from json import dumps as jdumps

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

{{ message|safe }}

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

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

<button type="button" onclick="myJavascriptFunction('{{ my_django_variable }}')"></button>
<script>
    myJavascriptFunction(djangoVariable){
       alert(djangoVariable);
    }
</script>

{{ mydata|json_script:"mydata" }}
<script>
    const mydata = JSON.parse(document.getElementById('mydata').textContent);
</script>