webapp2+GAE后端数据传递至前端script标签的正确方法？

这个问题我之前也碰到过！根源在于webapp2默认使用的模板引擎（Django模板）会自动对变量做HTML转义——简单说就是把字符串里的引号、尖括号这类特殊字符转换成HTML实体（比如'变成'，"变成"）。

你在HTML的<p>标签里能正常显示，是因为浏览器会自动把这些实体解析回原来的字符；但在<script>标签里，JS引擎不会做这个解析，直接把"当成了语法错误的一部分，所以才会报Unexpected token &。

下面给你两种靠谱的解决方法：

方法一：用safe过滤器跳过转义 #

如果你的数据是后端自己生成的（没有用户输入的内容，不存在XSS风险），可以直接告诉模板不要转义这个变量：

在前端的script标签里改成这样：

<script>
  // 加上|safe过滤器，让模板输出原始的Python数据格式
  const chartData = {{ data|safe }};
  console.log(chartData);
  
  // 接下来就可以用D3.js处理数据了，比如画个简单的条形图：
  d3.select("body")
    .selectAll("div")
    .data(chartData)
    .enter()
    .append("div")
    .style("background-color", "#4287f5")
    .style("width", d => d.Freq * 6 + "px")
    .text(d => `${d.Letter}: ${d.Freq}`);
</script>

方法二：后端转成JSON字符串（更安全通用） #

如果数据可能包含用户输入，或者你想更规范地传递数据，建议后端先把数据转成JSON格式：

第一步：修改后端代码 #

先导入json模块，把数据转成JSON字符串后再传给模板：

import os
import json
import webapp2
from google.appengine.ext import template

class MainHandler(webapp2.RequestHandler):
    def get(self):
        data = [{'Letter': 'A', 'Freq': 20 },{'Letter' : 'B','Freq': 12},{'Letter' : 'C','Freq': 47}]
        # 把Python列表转成JSON字符串
        template_values = {
            'data_json': json.dumps(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)

第二步：前端接收数据 #

在script标签里直接使用这个JSON字符串（记得加safe过滤器）：

<script>
  // JSON格式和JS对象字面量兼容，直接解析即可
  const chartData = {{ data_json|safe }};
  console.log(chartData);
  
  // 同样可以用D3.js绘制图表
</script>

两种方法都能解决你的问题，推荐用第二种，因为JSON是前后端数据传递的标准格式，安全性和兼容性更好。

内容的提问来源于stack exchange，提问作者Simon Breton