时间戳

首页 > 解决方案 > 如何在 JavaScript 中调用 Python 变量？

javascript - 如何在 JavaScript 中调用 Python 变量？

问题描述

我有一个返回一些值的 Python 函数。我还连接到我的项目 Google Charts。所以我需要将该值传递给 Google Charts 的 html 文件中的 js 函数。顺便说一句，该项目在 Django 上。

最正确的方法是什么？

{%  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 %}

标签： javascriptpythonhtmljsondjango

解决方案

您应该使用上下文呈现您的模板： 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 ticket #17419

推荐阅读