如何调用Python变量在JavaScript?

问题描述 投票:1回答:3

我有一个返回一定的价值Python函数。此外,我连接到我的项目谷歌图表。所以,我需要到值传递给在谷歌图表的HTML文件JS功能。该项目是Django的BTW。

什么是这样做的最正确的方法是什么?

{%  extends "gappi_tmp/wrapper.html" %}

{% block content %}

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['lol',11], // The variable should be here, instead of '11'
          ['Eat',   11] // Here another variable
        ]);

        var options = {
          title: 'Inbox | Outbox'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }


    </script>
  </head>
  <body>
    <div style="padding-top: 5px; background: cornflowerblue; width: auto; height: 300px;" id="piechart"></div>
  </body>

{% endblock %}
javascript python html json django
3个回答
0
投票

你应该渲染与上下文模板:https://docs.djangoproject.com/en/2.0/ref/templates/api/#rendering-a-context

传递上下文到模板的方法取决于你的看法是怎样写的。

基于函数的观点

通过上下文字典到render()功能:https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#optional-arguments

from django.shortcuts import render

def my_view(request):
    # View code here...
    context = {'foo': 'bar'}
    return render(request, 'myapp/index.html', context=context)

基于类的意见

写你自己实现add_context_data()方法:https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/#adding-extra-context

from django.views.generic import DetailView
from books.models import Book, Publisher

class PublisherDetail(DetailView):

    model = Publisher

    def get_context_data(self, **kwargs):
        # Call the base implementation first to get a context
        context = super().get_context_data(**kwargs)
        # Add in a QuerySet of all the books
        context['book_list'] = Book.objects.all()
        return context

key: value:一旦你通过{{ key }}上下文的模板,你应该在这样的模板使用。 https://docs.djangoproject.com/en/2.0/topics/templates/#variables

<script type="text/javascript"> 
   var a = "{{ key|escapejs }}";
</script>

escapejs模板过滤器是为了防止可能的XSS漏洞。如果你需要传递JSON,你可以检查出的Django票#17419


0
投票

动态生成的页面上面Django中包括Python代码必要的JSON数据对象

here


0
投票

如果你有你js提交您的HTML文件中,而不是在一个分离式的js文件,因为通过上下文传递的变量是在渲染模板可用,就可以继续下去。

通过上下文发送所有的变量模板后。

var jsVariable = '{{django_value}}';

var data = google.visualization.arrayToDataTable([
    ['Task', '{{ task_variable }}'], // as string
    ['lol',{{lol_variable}}], // as integer
    ['Eat',   {{eat_variable}} ]
]);

您也可以遍历。

var data = google.visualization.arrayToDataTable([
    {% for item in queryset %} // {% for item in json_response %}
        ['Task', '{{ task.attribute }}'],
    {% endfor %}  // {% endfor %}
]);

基本上,你要知道,你可以使用它,这取决于什么你真正想做的事情。

© www.soinside.com 2019 - 2024. All rights reserved.