Django에서 Javascript DOM으로 객체 전달

Django에서 Javascript DOM으로 객체 전달

javascript를 사용하여 Django에서 템플릿으로 쿼리 세트를 전달하려고 합니다.

이 문제를 해결하기 위해 여러 가지 방법을 시도했습니다.

1. 일반 접근법 - Javascript는 명명법[ &gt Object : ]으로 인해 오브젝트를 해석하려고 할 때 완전히 엉망이 됩니다.ID &lt, &gt 개체:아이디 &lt,...]

장고뷰

django_list = list(Some_Object.objects.all())

템플릿 HTML + JS

<script type="text/javascript" >
    var js_list = {{django_list}};
</script>

2. JSON 접근법 - 오브젝트목록을 json 문자열로 변환할 때 Django가 실패하여 JSON을 시리얼화할 수 없습니다.

장고뷰

django_list = list(Some_Object.objects.all())
json_list = simplejson.dumps(django_list)

템플릿 HTML + JS

<script type="text/javascript" >
    var js_list = {{json_list}};
</script>

그래서 여기 도움이 필요해요:)

제안/해결책이 있습니까?

감사합니다!

같은 질문, "Better"(더 최근의) 답변: Json에서 사용하기 위해 Django Queryset을 받아쓰십시오.

답변은 Vashishtha-jogi:

더 좋은 방법은 DjangoJ를 사용하는 것입니다.소네코더Decimal을 지원합니다.

import json
from django.core.serializers.json import DjangoJSONEncoder

prices = Price.objects.filter(product=product).values_list('price','valid_from')

prices_json = json.dumps(list(prices), cls=DjangoJSONEncoder)

매우 사용하기 쉽다.개별 필드를 플로팅으로 변환하기 위한 점프 스루 홉은 금지된다.

업데이트 : simplejson 대신 builtin json을 사용하도록 응답이 변경되었습니다.

뷰가 하는 것 같습니다.Django 1.5.

좋아, 해결책을 찾았어!

대부분 결과를 인용하지 않았기 때문입니다.Javascript가 오브젝트를 해석하려고 했을 때 이것은 문자열로 인식되지 않았습니다.

첫 번째 단계는 다음과 같습니다.

var js_list = {{django_list}}; 

변경 내용:

var js_list = "{{django_list}}";

그 후 장고가 글자를 탈옥하고 있다는 것을 깨달았기 때문에 다음과 같이 치환할 수밖에 없었습니다.

 var myJSONList = (("{{json_list}}").replace(/&(l|g|quo)t;/g, function(a,b){
                return {
                    l   : '<',
                    g   : '>',
                    quo : '"'
                }[b];
            }));

 myData = JSON.parse( myJSONList );

주의: 저는 다음과 같은 방법으로 장고에서 문자를 탈출하지 않도록 했습니다.

var js_list = "{{json_list|safe}}"; 

하지만 이것은 인용문과 혼동되기 때문에 효과가 없습니다.

마침내 자바스크립트로 전송하기 전에 JSON으로 변환하는 백엔드의 논리를 피할 수 있는 방법을 찾았습니다.

var myDjangoList = (("{{django_list |safe}}").replace(/&(l|g|quo)t;/g, function(a,b){
            return {
                l   : '<',
                g   : '>',
                quo : '"'
            }[b];
        }));

myDjangoList = myDjangoList.replace(/u'/g, '\'')
myDjangoList = myDjangoList.replace(/'/g, '\"')

myData = JSON.parse( myDjangoList );

개선될 수 있을 거라고 확신해요.이것을 당신에게 맡깁니다;)

답변 감사합니다.

다른 사람에게 도움이 되었으면 좋겠다!

Django 쿼리셋은 JSON에서 직렬화할 수 있습니다.일부 필드 유형(날짜 등)은 현재에 직렬화할 수 없습니다.날짜 객체의 회피책은 JSON 및 Python의 다른 질문에 게시되어 있습니다.

JavaScript 자체에서 직접 사전을 만드는 것을 추천합니다.다음과 같은 모델이 있습니다.

class Article(models.Model):
    title = models.CharField(max_length=100)
    slug = models.SlugField()
    content = models.TextField()

class Author(models.Model):
    article = models.ForeignKey("Article", related_name="authors")
    first_name=models.CharField(max_length=100)
    last_name=models.CharField(max_length=100)

템플릿에서는 다음과 같은 작업을 수행합니다.

<script type="text/javascript">
    var articles = [
    {% for article in article_list %}
        {% if not forloop.first %},{% endif %}
        {
            title: "{{ article.title }}",
            slug: "{{ article.slug }}",
            content: "{{ article.content }}",
            authors: [
            {% for author in article.authors.all %}
                {% if not forloop.first %},{% endif %}
                {
                    first_name: "{{ author.first_name }}",
                    last_name: "{{ author.last_name }}",
                }
            {% endfor %}
            ]
        }
    {% endfor %}
    ]
</script>

만약 당신이 질문을 약간 서투르게 표현하고 코드를 삽입할 계획이 없다면<script>태그를 붙여서 실제로 어떤 이유로 JSON이 필요한 경우 뷰에서 루프를 수행하고 목록을 만듭니다.dict는 이해에 ).sJSON은 JavaScript는 문제가 없습니다).

편집: 이 방법을 사용하지 마십시오. @agcontinate의 답변을 참조하십시오.

escapejs 필터를 사용합니다.https://docs.djangoproject.com/en/1.4/ref/templates/builtins/ # scapejs

목록을 덤프하는 예:

var foo = [{% for x in y %}'{{ x|escapejs }}',{% endfor %}]

Django 2.1부터 json-script 템플릿태그가 있어요문서에서:

json_script

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

인수: 태그의 HTML "id"입니다.

예를 들어 다음과 같습니다.

{{ value|json_script:"hello-data" }} 

{'hello': 'world'}을 사용하다

<script id="hello-data" type="application/json">
{"hello": "world"}
</script>

결과 데이터는 다음과 같이 JavaScript에서 액세스할 수 있습니다.

var value = JSON.parse(document.getElementById('hello-data').textContent); 

은 문자 및"&.X를 이스케이프함으로써 됩니다.SS는 '<', '>', '&'입니다.를 들어 값이 " " " 인 {'hello': 'world</script>&amp;'}을 사용하다

<script id="hello-data" type="application/json">
    {"hello": "world\\u003C/script\\u003E\\u0026amp;"}
</script> 

이는 페이지 내 스크립트 실행을 금지하는 엄격한 콘텐츠 보안 정책과 호환됩니다.또한 패시브 데이터와 실행 가능 코드 간의 명확한 분리도 유지합니다.

장고에서는 safe와 excapejs 내장 필터를 조합하여 사용할 수 있습니다.

var json_string = unescape({{json_list | safe | escapejs}});
var json_data = JSON.parse(json_string);

문제는 대부분의 경우처럼 요건이 제대로 지정되지 않았다는 것입니다.JSON이 정확히 어떻게 생겼으면 좋겠어요?"쿼리셋을 직렬화"한다고 하셨는데 어떤 형식으로 하시겠습니까?각 모델 인스턴스의 모든 필드를 선택하시겠습니까, 아니면 유니코드만 표시하시겠습니까?그 질문에 답하면 문제를 해결할 방법을 알게 될 것이다.

하나의 접근법은 " " " " " " " " 를 사용하는 입니다.values각하고 (해야 함).queryset은 목록으로 변환해야 합니다.queryset method를 사용합니다.

data = SomeObject.objects.values('field1', 'field2', 'field3')
serialized_data = simplejson.dumps(list(data))

줄에 안전 표시를 해야 탈옥이 안 돼요

프로젝트 중 하나에서는 다음과 같이 사용합니다.

# app/templatetag/jsonify.py
from django import template
from django.utils.safestring import mark_safe
import json

register = template.Library()

@register.filter
def jsonify(list):
    return mark_safe(json.dumps(list))

및 템플릿에

{% load jsonify %}
<script type="text/javascript" >
    var js_list = {{ python_list|jsonify|escapejs }};
</script>

, 하여 모든 mark_safe를 것이 .>

문제가 복잡한 Python 객체를 처리하는 경우 다음과 같이 처리해야 합니다. Python과 JavaScript 사이의 JSON datetime

Django는 당신이 여기서 하려고 하는 바로 그 시나리오에 대해 내장된 도움을 제공한다.다음과 같습니다.

보기에 python 시퀀스, 목록, 사전 등이 있습니다.이것을 python이라고 부릅니다.py_object한 가지 방법은 렌더링 엔진에 전달하기 전에 jsonify하는 것입니다.

from django.shortcuts import render_to_response
import json  

나중에 이렇게 쓰면...

render_to_response('mypage.html',{'js_object':json.dumps(py_object)})

템플릿에서는 다음 명령어를 사용합니다.safe필터는 이미 jsonized된 객체를 python에서 javascript로 Import합니다.이렇게...

data = {{ js_object|safe }}

그게 너의 문제를 해결해 주길 바라.

둘 중 하나

다음을 사용하여 개체 읽기{{ django_list }}불필요한 문자를 삭제합니다.

또는 실행한다.

{{ django_list | safe}}

통합 답변 (내 환경: Django 2.0)

뷰에서.화이

import json
data= []
// fil the list
context['mydata'] = json.dumps({'data':data})

템플릿 내

  <script type="text/javascript">
      var mydataString = "{{mydata|escapejs}}";
      console.log(JSON.parse(mydataString));
  </script>

QuerySet 전체를 전송하려면 (필드 이름을 유지한 채 전송)object것은 아니다.list). 다음을 사용하였습니다.

    # views.py        
    units = Unit.objects.all()
    units_serialized = serializers.serialize('json', units)
    context['units'] = units_serialized

그냥 사용하세요.safe템플릿 태그 지정

    # template.html
    <script>
            console.log({{units|safe}});
    </script>

django 2.1에 관한 주의사항

django 문서에서는 조금 혼란스러웠기 때문에 간단하게 설명하겠습니다.

우리는 보통 이것을 다음과 같이 사용한다.

{{ my_info }}

아니면 우리가 필요한 것에 따라 루프오버를 할 수도 있습니다.하지만 다음 필터를 사용하면

json_script 

이 값을 JSON으로 안전하게 출력할 수 있습니다.

{{ my_info|json_script:"my-info" }}

우리의 데이터는 스크립트 태그에 싸인 JSON으로 추가되어 데이터를 볼 수 있습니다.이 값은 다음과 같이 JavaScript에서 검색할 수 있습니다.

info = JSON.parse(document.getElementById('my-info').textContent);

또한 JSON 데이터를 Django에서 올바르게 출력하도록 주의해 주십시오.그렇지 않으면 프런트 엔드 측의 모든 시행이 시간 낭비입니다.제 경우 JsonResponse를 렌더링 함수의 일부로 사용할 수 없었기 때문에 다음을 수행했습니다.

    def view(self, request):

        data = []
        machine_data = list(Machine.objects.filter(location__isnull=False).values_list('serial', 'location', 'customer__name'))
        data.append({
            "locations": machine_data,
        })

        return render(request, 'admin/company/device/map.html', {
            "machines": data
        })

프런트 엔드에는 다음과 같습니다.

{% block content %}

    {{ machines_with_location|json_script:"machineLocationData" }}

    <div id="content-main">

        <h1>Title</h1>

        <script type="text/javascript">

            const locationDataFromJson = JSON.parse(document.getElementById('machineLocationData').textContent);

        </script>

    </div>

{% endblock %}

언급URL : https://stackoverflow.com/questions/7165656/passing-objects-from-django-to-javascript-dom