ตัวแปรเทมเพลต Django และ Javascript

เมื่อฉันทำให้หน้าโดยใช้แม่แบบ Django renderer {{ myVar }}ผมสามารถผ่านในตัวแปรพจนานุกรมมีค่าต่างๆที่จะจัดการกับพวกเขาในหน้าโดยใช้

มีวิธีเข้าถึงตัวแปรเดียวกันใน Javascript (อาจใช้ DOM ฉันไม่รู้ว่า Django ทำให้ตัวแปรสามารถเข้าถึงได้) หรือไม่? ฉันต้องการให้สามารถค้นหารายละเอียดโดยใช้การค้นหา AJAX ตามค่าที่มีอยู่ในตัวแปรที่ส่ง

{{variable}}แทนโดยตรงในรูปแบบ HTML ทำแหล่งที่มาของมุมมอง; มันไม่ได้เป็น "ตัวแปร" หรืออะไรทำนองนั้น มันเป็นเพียงข้อความที่แสดงผล

ต้องบอกว่าคุณสามารถแทนที่ประเภทนี้ลงใน JavaScript ของคุณ

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

สิ่งนี้จะให้จาวาสคริปต์ "ไดนามิก" ของคุณ

ข้อควรระวังตรวจสอบตั๋ว# 17419เพื่อหารือเกี่ยวกับการเพิ่มแท็กที่คล้ายกันลงใน Django core และช่องโหว่ XSS ที่เป็นไปได้ที่แนะนำโดยใช้แท็กแม่แบบนี้กับข้อมูลที่ผู้ใช้สร้างขึ้น ความคิดเห็นจาก amacneil กล่าวถึงข้อกังวลส่วนใหญ่ที่เกิดขึ้นในตั๋ว

ฉันคิดว่าวิธีที่ยืดหยุ่นและสะดวกที่สุดในการทำเช่นนี้คือการกำหนดตัวกรองแม่แบบสำหรับตัวแปรที่คุณต้องการใช้ในรหัส JS นี้จะช่วยให้คุณเพื่อให้แน่ใจว่าข้อมูลของคุณจะหนีออกมาได้อย่างถูกต้องและคุณสามารถใช้กับโครงสร้างข้อมูลที่ซับซ้อนเช่นและdict listนั่นเป็นเหตุผลที่ฉันเขียนคำตอบนี้แม้ว่าจะมีคำตอบที่ยอมรับพร้อมกับ upvotes มากมาย

นี่คือตัวอย่างของตัวกรองเทมเพลต:

// 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

ฉันกำลังเผชิญกับปัญหา simillar และคำตอบที่ S.Lott แนะนำให้ฉันทำ

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

อย่างไรก็ตามฉันต้องการจะชี้ให้เห็นข้อ จำกัด การใช้งานที่สำคัญที่นี่ หากคุณวางแผนที่จะวางรหัสจาวาสคริปต์ในไฟล์อื่นและรวมไฟล์นั้นไว้ในแม่แบบของคุณ สิ่งนี้ใช้ไม่ได้

สิ่งนี้ใช้ได้เฉพาะเมื่อคุณแม่แบบหลักและรหัสจาวาสคริปต์อยู่ในไฟล์เดียวกัน ทีม django อาจเป็นไปได้ที่จะแก้ไขข้อ จำกัด นี้

ฉันก็ต้องดิ้นรนกับเรื่องนี้เช่นกัน บนพื้นผิวดูเหมือนว่าการแก้ปัญหาข้างต้นควรทำงาน อย่างไรก็ตามสถาปัตยกรรม django ต้องการให้ไฟล์ html แต่ละไฟล์มีตัวแปรที่สร้างการแสดงผลของตัวเอง (นั่นคือ, {{contact}}ถูกเรนเดอร์ไปcontact.html, ในขณะที่{{posts}}ไปที่ eg 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 และทำงานให้ฉันและวิธีนี้ปลอดภัย(อ้างอิง) :

ด้าน 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>

ด้วยวิธีนี้คุณจะรักษาประเภทของข้อมูลซึ่งในกรณีนี้คือข้อตกลง

มีสองสิ่งที่เหมาะกับฉันใน 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 }}