장고 템플릿 변수 및 Javascript

장고 템플릿 변수 및 Javascript

사용하여 때 한 값을 하여 Django 템플릿 렌더러를 사용하여 페이지에서 할 수 .{{ myVar }}.

Javascript에서 동일한 변수에 접근할 수 있는 방법이 있습니까(DOM을 사용하면 Django가 변수에 어떻게 접근할 수 있는지 알 수 없습니다).전달된 변수에 포함된 값을 기반으로 AJAX 룩업을 사용하여 세부 정보를 조회할 수 있도록 하고 싶습니다.

{{variable}}HTML로 직접 대체됩니다. 뷰 소스를 수행합니다. "변수"나 이와 유사한 것이 아닙니다.그냥 렌더링된 텍스트일 뿐이에요.

이러한 대체 기능을 JavaScript에 넣을 수 있습니다.

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

이를 통해 "동적인" Javascript가 제공됩니다.

주의: 유사한 태그를 Django 코어에 추가하는 방법 및 사용자가 생성한 데이터와 함께 이 템플릿태그를 사용함으로써 발생할 수 있는 XSS 취약성에 대한 자세한 내용은 티켓 #17419를 참조하십시오.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 }}">

그리고 이런 식으로 자바스크립트 값을 얻으면

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

장고 2.1번json_script.

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

새 태그는 템플릿 값을 안전하게 직렬화하고 XSS로부터 보호합니다.

장고 문서 발췌:

Python 개체를 태그로 감싸 JavaScript와 함께 사용할 수 있는 JSON으로 안전하게 출력합니다.

내장된 템플릿태그 json_script를 사용하여 Django 2.1+에서 구현되는 편리한 방법이 있습니다.예를 들어 다음과 같습니다.

템플릿에 변수를 선언합니다.

{{ variable|json_script:'name' }}

그리고 나서, 그 변수에 호출합니다.<script>Javascript:

var js_variable = JSON.parse(document.getElementById('name').textContent);

'User'와 같은 보다 복잡한 변수의 경우 Django의 내장 시리얼라이저를 사용하여 "Object of User is not JSON serializable"과 같은 오류가 발생할 수 있습니다.이 경우 Django Rest Framework를 사용하여 보다 복잡한 변수를 사용할 수 있습니다.

new docs는 사용방법이라고 합니다.{{ mydata|json_script:"mydata" }}코드 주입을 방지합니다.

좋은 예는 다음과 같습니다.

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

Django 필드에 텍스트로 저장된 JavaScript 객체의 경우 페이지 스크립트에 동적으로 삽입된 JavaScript 객체가 되어야 합니다.escapejs그리고.JSON.parse():

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

장고의escapejs견적을 적절히 처리한다.JSON.parse()는 문자열을 다시 JS 객체로 변환합니다.

다음은 매우 쉽게 수행할 수 있는 작업입니다.템플릿의 base.html 파일을 수정하여 아래쪽에 배치했습니다.

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

그런 다음 javascript 파일에서 변수를 사용하고 싶을 때 DJ 데이터 사전을 만들고 json을 사용하여 컨텍스트에 추가합니다.context['DJdata'] = json.dumps(DJdata)

도움이 됐으면 좋겠다!

사전의 경우 먼저 JSON으로 인코딩하는 것이 가장 좋습니다.simplejson.dumps()를 사용하거나 App Engine의 데이터 모델에서 변환하는 경우 GQLEncoder 라이브러리에서 encode()를 사용할 수 있습니다.

변수를 외부 .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

나는 S가 제시한 유사한 문제와 답변을 마주하고 있었다.로트가 날 위해 일했어

<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 변수를 전달할 수 있습니다.

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

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

예를 들어 필요한 Javascript 코드 바로 앞에 있는 htm 코드로 받아 문학적 방식으로 해석합니다.

템플릿

{{ prueba|safe  }}

아래는 코드의 나머지입니다.이 예에서 사용할 변수는 data2 입니다.

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

이 경우 데이터 유형을 유지할 수 있습니다.

Javascript에는 두 가지가 있습니다.

'{{context_variable|escapejs }}'

기타:뷰에서.화이

from json import dumps as jdumps

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

및 html:

{{ message|safe }}

언급URL : https://stackoverflow.com/questions/298772/django-template-variables-and-javascript