如何在JavaScript中使用Jinja2？使用时遇报错求助

核心问题 #

你遇到的是浏览器将Jinja模板语法当作原生JavaScript代码解析，触发语法错误（比如报错提示的Uncaught SyntaxError: Unexpected token '{'）。

Jinja是服务端模板引擎，它的语法（{{ 变量 }}、{% 控制语句 %}）必须在服务端渲染页面时完成解析替换，再把最终的HTML/JS代码发送给浏览器。直接在前端JS里写Jinja语法，浏览器无法识别这些符号，必然报错。

针对性解决方法 #

结合你的Python后端代码（推测是Flask框架场景），提供三种可行方案：

1. 服务端注入变量到JS

在HTML模板中，用Jinja把后端变量渲染成合法的JS格式，再在JS中使用：

<script>
  // 用tojson过滤器把Python对象转成合法JSON
  const backendData = {{ your_flask_variable | tojson }};
  // 正常使用变量
  console.log(backendData);
</script>

tojson过滤器会自动处理引号、特殊字符，避免JS语法错误。

2. AJAX请求后端接口拿数据

如果数据需要动态获取或体量较大，不要直接在JS里嵌Jinja，而是通过接口拉取：

// 前端JS
fetch('/api/get-data')
  .then(res => res.json())
  .then(data => {
    // 处理拿到的数据
    console.log(data);
  });

对应的Flask后端接口：

@app.route('/api/get-data')
def get_data():
    data = {"name": "test", "items": [1,2,3]}
    return jsonify(data)

3. 服务端渲染JS控制逻辑

如果要在JS里用Jinja的循环、判断，必须在服务端完成渲染：

<script>
  {% for item in data_list %}
    // 用escapejs转义特殊字符，避免破坏JS结构
    console.log("{{ item | escapejs }}");
  {% endfor %}
</script>

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