Question

我在学习，而且我遇到了一些我无法理解的事情。

我有一个用python GAE和webbapp2构建的简单的hello world应用程序。

我想使用D3.js

在前端显示图表

如果我能够直接在我的前端（<p>{{data}}</p>）的HTML部分显示一些数据，我无法在<script> </script>标记内传递任何数据我的前端。

以下是我后端的MainHandler：

MainHandler(webapp2.RequestHandler):
    def get(self):
        data = [{'Letter': 'A', 'Freq': 20  },{'Letter' : 'B','Freq': 12},{'Letter' : 'C','Freq': 47}]
        template_values = {
            'data' : data
        }
        path = os.path.join(os.path.dirname(__file__), 'index.html')
        self.response.out.write(template.render(path, template_values))

app = webapp2.WSGIApplication([
    ('/', MainHandler),
], debug=True)

在前端我有一个简单的console.log({{data}})导致以下错误Unexpected token &

我想我不明白这里有什么，但我不知道是什么。

Answer 1

模板引擎是escaping您的数据，以防止它混淆浏览器的渲染引擎或导致安全问题。所以

[{'Letter': 'A', 'Freq': 20 }]

呈现为

[{'Letter': 'A', 'Freq': 20}]

或

[{&#quot;Letter&#quot;: &#quot;A&#quot;, &#quot;Freq&#quot;: 20}]

这令人困惑console.log，这是一个不知道html转义的javascript函数。

您可以使用safe过滤器在Jinja2中覆盖此行为。

console.log({{ data|safe }})

请注意，您应该只覆盖对可信数据的转义。

使用webbapp2将数据从后端发送到前端的正确方法是什么？

1 个答案: