时间戳

首页 > 解决方案 > 使用 webbapp2 将数据从后端发送到前端的正确方法？

python - 使用 webbapp2 将数据从后端发送到前端的正确方法？

问题描述

我正在学习，但我被一些我无法理解的东西困住了。

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

我想使用 D3.js 在前端显示图表

如果我能够将一些数据直接显示到我的前端的 HTML 部分 ( <p>{{data}}</p>) 我无法在<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 &

我想这里有一些我不明白的地方，但我不知道是什么。

标签： pythonwebapp2

解决方案

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

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

呈现为

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

或者

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

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

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

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

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

推荐阅读