जब मैं Django टेम्प्लेट रेंडरर का उपयोग करके किसी पृष्ठ को प्रस्तुत करता हूं, तो मैं एक शब्दकोश चर में पास कर सकता हूं जिसमें विभिन्न मानों का उपयोग करके उन्हें पृष्ठ में हेरफेर किया जा सकता है {{ myVar }}।
क्या जावास्क्रिप्ट में एक ही चर को एक्सेस करने का एक तरीका है (शायद DOM का उपयोग करके, मुझे नहीं पता कि Django चर को कैसे सुलभ बनाता है)? मैं पास में मौजूद चर में निहित मूल्यों के आधार पर AJAX लुकअप का उपयोग करके विवरण देखने में सक्षम होना चाहता हूं।
जवाबों:
{{variable}}सीधे HTML में दिया जाता है। एक स्रोत देखें; यह "चर" या ऐसा कुछ भी नहीं है। यह सिर्फ पाठ प्रस्तुत किया गया है।
ऐसा कहने के बाद, आप इस प्रकार के प्रतिस्थापन को अपने जावास्क्रिप्ट में डाल सकते हैं।
<script type="text/javascript">
var a = "{{someDjangoVariable}}";
</script>
यह आपको "डायनामिक" जावास्क्रिप्ट देता है।
escapejsफिल्टर मौजूद है:escapejs('<>') -> u'\\u003C\\u003E'
चेतावनी चेक टिकट # 17419 Django कोर में इसी तरह के टैग को जोड़ने और उपयोगकर्ता द्वारा उत्पन्न डेटा के साथ इस टेम्पलेट टैग का उपयोग करके संभावित XSS भेद्यता पर चर्चा के लिए। अमाकनील की टिप्पणी टिकट में उठाए गए अधिकांश चिंताओं पर चर्चा करती है।
मुझे लगता है कि ऐसा करने का सबसे लचीला और आसान तरीका यह है कि आप जेएस कोड में जिन वेरिएबल का उपयोग करना चाहते हैं, उनके लिए एक टेम्प्लेट फिल्टर को परिभाषित करें। यह आपको यह सुनिश्चित करने की अनुमति देता है, कि आपका डेटा ठीक से बच गया है और आप इसका उपयोग जटिल डेटा संरचनाओं जैसे कि 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>
safeकेवल उचित रूपान्तरण और भागने के बिना, मान सुरक्षित है।
function myWidget(config) { /* implementation */ }जेएस फाइल में घोषणा करते हैं और आप इसका उपयोग करते हुए कुछ पृष्ठों पर करते हैं myWidget({{ pythonConfig | js }})। लेकिन आप इसे जेएस फाइलों में उपयोग नहीं कर सकते हैं (जैसा कि आपने देखा), इसलिए इसकी सीमाएं हैं।
मेरे लिए काम करने वाला एक समाधान टेम्पलेट में छिपे इनपुट क्षेत्र का उपयोग कर रहा है
<input type="hidden" id="myVar" name="variable" value="{{ variable }}">फिर इस तरह से जावास्क्रिप्ट में मूल्य प्राप्त करना,
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 डॉक्स अंश:
जावास्क्रिप्ट के साथ उपयोग के लिए तैयार, टैग में लिपटे JSON के रूप में सुरक्षित रूप से पायथन ऑब्जेक्ट को आउटपुट करता है।
यहाँ वह है जो मैं बहुत आसानी से कर रहा हूँ: मैंने अपने खाके के लिए अपनी बेस। Html फ़ाइल को संशोधित किया और उसे नीचे रखा:
{% if DJdata %}
<script type="text/javascript">
(function () {window.DJdata = {{DJdata|safe}};})();
</script>
{% endif %}
तब जब मैं जावास्क्रिप्ट फ़ाइलों में एक चर का उपयोग करना चाहता हूं, मैं एक डीजेडेटा शब्दकोश बनाता हूं और मैं इसे एक json द्वारा संदर्भ में जोड़ता हूं: context['DJdata'] = json.dumps(DJdata)
आशा करता हूँ की ये काम करेगा!
एक शब्दकोश के लिए, आप पहले JSON के लिए एन्कोडिंग के सर्वश्रेष्ठ हैं। आप simplejson.dps () का उपयोग कर सकते हैं या यदि आप ऐप इंजन में डेटा मॉडल से कनवर्ट करना चाहते हैं, तो आप GQLEncoder लाइब्रेरी से एनकोड () का उपयोग कर सकते हैं।
मैं सिमिलर मुद्दे का सामना कर रहा था और एस.लॉट द्वारा सुझाए गए जवाब ने मेरे लिए काम किया।
<script type="text/javascript">
var a = "{{someDjangoVariable}}"
</script>हालांकि मैं यहां प्रमुख कार्यान्वयन सीमा को इंगित करना चाहूंगा । यदि आप अपने जावास्क्रिप्ट कोड को अलग फ़ाइल में डालने की योजना बना रहे हैं और उस फ़ाइल को अपने टेम्पलेट में शामिल करें। यह काम नहीं करेगा।
यह तभी काम करता है जब आप मुख्य टेम्पलेट और जावास्क्रिप्ट कोड एक ही फाइल में होते हैं। संभवतः django की टीम इस सीमा को संबोधित कर सकती है।
मैं इससे भी जूझ रहा हूं। सतह पर ऐसा लगता है कि उपरोक्त समाधान काम करना चाहिए। हालाँकि, django आर्किटेक्चर के लिए आवश्यक है कि प्रत्येक HTML फ़ाइल के अपने स्वयं के रेंडर किए गए वैरिएबल हैं (जो कि {{contact}}रेंडर किए जाते हैं contact.html, जबकि {{posts}}उदाहरण के लिए index.htmlऔर इसी तरह)। दूसरी ओर, <script>टैग के बाद दिखाई {%endblock%}में base.htmlजहाँ से contact.htmlऔर index.htmlप्राप्त करती हैं। मूल रूप से इसका मतलब है कि किसी भी समाधान सहित
<script type="text/javascript">
var myVar = "{{ myVar }}"
</script>विफल होने के लिए बाध्य है, क्योंकि चर और स्क्रिप्ट एक ही फ़ाइल में सह-अस्तित्व में नहीं हो सकते।
सरल समाधान जो अंततः मेरे साथ आया था, और मेरे लिए काम करता था, बस चर को आईडी के साथ टैग के साथ लपेटना था और बाद में इसे जेएस फ़ाइल में संदर्भित करना चाहिए, जैसे:
// index.html
<div id="myvar">{{ myVar }}</div>और फिर:
// somecode.js
var someVar = document.getElementById("myvar").innerHTML;और बस में शामिल हैं <script src="static/js/somecode.js"></script>में base.htmlहमेशा की तरह। बेशक यह केवल सामग्री प्राप्त करने के बारे में है। सुरक्षा के संबंध में, बस अन्य उत्तरों का पालन करें।
.textContentइसके बजाय उपयोग करना चाहते हैं .innerHTML, क्योंकि अन्यथा HTML- एन्कोडेड प्राप्त करने वाली इकाइयाँ जेएस चर का भी हिस्सा होंगी। लेकिन फिर भी यह 1: 1 को पुन: पेश नहीं किया जा सकता है (मुझे यकीन नहीं है)।
पाठ के रूप में एक Django फ़ील्ड में संग्रहीत एक जावास्क्रिप्ट ऑब्जेक्ट के लिए, जिसे फिर से एक जावास्क्रिप्ट ऑब्जेक्ट बनने की आवश्यकता है गतिशील रूप से ऑन-पेज स्क्रिप्ट में डाला जाता है, आपको दोनों का उपयोग करने की आवश्यकता है 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 में इस तरह का उपयोग करता हूं और मेरे लिए काम करता हूं और यह तरीका सुरक्षित है (संदर्भ) :
Django पक्ष:
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 कोड के रूप में व्याख्या करते हैं, जावास्क्रिप्ट कोड से ठीक पहले जहां आपको इसकी आवश्यकता होती है, उदाहरण के लिए
टेम्पलेट
{{ prueba|safe }}और नीचे आपका बाकी कोड है, ध्यान रखें कि उदाहरण में उपयोग किया जाने वाला चर data2 है
<script>
console.log(data2);
</script>इस तरह से आप डेटा का प्रकार रखेंगे, जो इस मामले में एक व्यवस्था है
aaaइसमें केवल संख्याएँ होंगी, अन्यथा XSS (स्क्रिप्ट इंजेक्शन) संभव है।
जावास्क्रिप्ट के अंदर मेरे लिए काम करने वाली दो चीजें हैं:
'{{context_variable|escapejs }}'और अन्य: view.py में
from json import dumps as jdumps
def func(request):
context={'message': jdumps('hello there')}
return render(request,'index.html',context)और HTML में:
{{ message|safe }}