Biến mẫu Django và Javascript

Khi tôi kết xuất một trang bằng trình kết xuất mẫu Django, tôi có thể chuyển vào một biến từ điển có chứa các giá trị khác nhau để thao tác chúng trong trang bằng cách sử dụng {{ myVar }}.

Có cách nào để truy cập cùng một biến trong Javascript (có lẽ sử dụng DOM, tôi không biết làm thế nào Django làm cho các biến có thể truy cập được)? Tôi muốn có thể tra cứu chi tiết bằng cách sử dụng tra cứu AJAX dựa trên các giá trị có trong các biến được truyền vào.

Nó {{variable}}được thay thế trực tiếp vào HTML. Làm một nguồn xem; nó không phải là "biến" hay bất cứ thứ gì giống như vậy. Nó chỉ hiển thị văn bản.

Như đã nói, bạn có thể đặt loại thay thế này vào JavaScript của mình.

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

Điều này cung cấp cho bạn javascript "động".

THẬN TRỌNG Kiểm tra vé # 17419 để thảo luận về việc thêm thẻ tương tự vào lõi Django và các lỗ hổng XSS có thể được giới thiệu bằng cách sử dụng thẻ mẫu này với dữ liệu do người dùng tạo. Nhận xét từ amacneil thảo luận về hầu hết các mối quan tâm được nêu ra trong vé.

Tôi nghĩ rằng cách linh hoạt và tiện dụng nhất để làm điều này là xác định bộ lọc mẫu cho các biến bạn muốn sử dụng trong mã JS. Điều này cho phép bạn đảm bảo rằng dữ liệu của bạn được thoát đúng và bạn có thể sử dụng nó với các cấu trúc dữ liệu phức tạp, chẳng hạn như dictvà list. Đó là lý do tại sao tôi viết câu trả lời này mặc dù có một câu trả lời được chấp nhận với rất nhiều sự ủng hộ.

Dưới đây là một ví dụ về bộ lọc mẫu:

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

Bộ lọc mẫu này chuyển đổi biến thành chuỗi JSON. Bạn có thể sử dụng nó như vậy:

// myapp/templates/example.html

{% load js %}

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

Một giải pháp hiệu quả với tôi là sử dụng trường nhập liệu ẩn trong mẫu

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

Sau đó, nhận được giá trị trong javascript theo cách này,

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

Kể từ Django 2.1, thẻ mẫu tích hợp mới đã được giới thiệu riêng cho trường hợp sử dụng này : json_script.

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

Thẻ mới sẽ tuần tự hóa một cách an toàn các giá trị mẫu và bảo vệ chống lại XSS.

Đoạn trích tài liệu Django:

Đầu ra một cách an toàn một đối tượng Python dưới dạng JSON, được bọc trong một thẻ, sẵn sàng để sử dụng với JavaScript.

Đây là những gì tôi đang làm rất dễ dàng: Tôi đã sửa đổi tệp base.html cho mẫu của mình và đặt nó ở dưới cùng:

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

sau đó khi tôi muốn sử dụng một biến trong các tệp javascript, tôi tạo một từ điển DJdata và tôi thêm nó vào ngữ cảnh bởi một json: context['DJdata'] = json.dumps(DJdata)

Hy vọng nó giúp!

Đối với một từ điển, trước tiên bạn nên mã hóa thành JSON. Bạn có thể sử dụng Simplejson.dumps () hoặc nếu bạn muốn chuyển đổi từ mô hình dữ liệu trong Máy ứng dụng, bạn có thể sử dụng encode () từ thư viện GQLEncoder.

Tôi đã phải đối mặt với vấn đề simillar và câu trả lời được đề xuất bởi S.Lott đã làm việc cho tôi.

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

Tuy nhiên tôi muốn chỉ ra giới hạn thực hiện chính ở đây. Nếu bạn đang dự định đặt mã javascript của mình vào tệp khác và đưa tệp đó vào mẫu của bạn. Điều này sẽ không làm việc.

Điều này chỉ hoạt động khi mẫu chính của bạn và mã javascript nằm trong cùng một tệp. Có lẽ đội django có thể giải quyết giới hạn này.

Tôi cũng đang vật lộn với điều này. Nhìn bề ngoài, có vẻ như các giải pháp trên nên hoạt động. Tuy nhiên, kiến ​​trúc django yêu cầu mỗi tệp html có các biến được kết xuất riêng (nghĩa là {{contact}}được kết xuất contact.html, trong khi {{posts}}chuyển sang ví dụ index.html, v.v.). Mặt khác, <script>thẻ xuất hiện sau {%endblock%}trong base.htmltừ đó contact.htmlvà index.htmlkế thừa. Điều này về cơ bản có nghĩa là bất kỳ giải pháp bao gồm

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

bị ràng buộc là thất bại, bởi vì biến và tập lệnh không thể cùng tồn tại trong cùng một tệp.

Giải pháp đơn giản mà cuối cùng tôi đã đưa ra và làm việc cho tôi, chỉ đơn giản là bọc biến với một thẻ bằng id và sau đó tham chiếu nó trong tệp js, như vậy:

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

và sau đó:

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

và chỉ bao gồm <script src="static/js/somecode.js"></script>trong base.htmlnhư bình thường. Tất nhiên đây chỉ là về việc có được nội dung. Về bảo mật, chỉ cần làm theo các câu trả lời khác.

Đối với một đối tượng JavaScript được lưu trữ trong trường Django dưới dạng văn bản, một lần nữa cần trở thành đối tượng JavaScript được chèn động vào tập lệnh trên trang, bạn cần sử dụng cả hai escapejsvà JSON.parse():

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

Django escapejsxử lý trích dẫn đúng cách và JSON.parse()chuyển đổi chuỗi trở lại thành đối tượng JS.

Lưu ý rằng nếu bạn muốn chuyển một biến sang tập lệnh .js bên ngoài thì bạn cần đặt trước thẻ script của mình bằng một thẻ script khác khai báo một biến toàn cục.

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

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

data được định nghĩa trong khung nhìn như bình thường trong get_context_data

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

Tôi sử dụng cách này trong Django 2.1 và làm việc cho tôi và cách này là an toàn (tham khảo) :

Bên Django:

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

Bên Html:

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

bạn có thể tập hợp toàn bộ tập lệnh trong đó biến mảng của bạn được khai báo trong một chuỗi, như sau,

lượt xem

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

sẽ tạo ra một chuỗi như sau

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

Sau khi có chuỗi này, bạn phải gửi nó đến mẫu

lượt xem

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

trong mẫu bạn nhận được nó và giải thích nó theo cách hiểu văn bản dưới dạng mã htm, ngay trước mã javascript nơi bạn cần, chẳng hạn

bản mẫu

{{ prueba|safe  }}

và bên dưới đó là phần còn lại của mã của bạn, hãy nhớ rằng biến được sử dụng trong ví dụ là data2

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

theo cách đó bạn sẽ giữ được loại dữ liệu, trong trường hợp này là một sự sắp xếp

Có hai điều làm việc cho tôi trong Javascript:

'{{context_variable|escapejs }}'

và khác: Trong lượt xem

from json import dumps as jdumps

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

và trong html:

{{ message|safe }}