无法将 jinja2 变量传递到 javascript 代码段中答案

【问题标题】：Unable to pass jinja2 variables into javascript snippet无法将 jinja2 变量传递到 javascript 代码段中
【发布时间】：2014-03-04 18:20:53
【问题描述】：

如何将 jinja2 数据传递到 javascript。我有一个 Flask REST url 为/logs/<test_case_name> 我正在尝试使用 .getJSON() 来查询上述 URL，因此希望将具有 testcasename 的 jinja2 数据传递给 .getJSON 函数。

示例代码：

<script type="text/javascript">
  alert({{name}});
</script>

它不起作用。请问有什么建议吗？

【问题讨论】：

{{ name|safe }} 应该可以工作
@JakobBowyer - 它工作正常:(
将模板语言与 javascript 混合通常是个坏主意。另一种方法是使用 html 作为代理 - 将名称存储在像这样的元素中，然后在 javascript 中执行 djangoData = $('#my-data').data();

标签： javascript python flask jinja2

【解决方案1】：

你可以试试 alert({{name|safe}});

【讨论】：

您好。尝试详细说明或发表评论。

【解决方案2】：

我只是想我会添加我最终使用的解决方案。

与其他答案相比，它有一些优势：

它在模板级别是 100% 有效的 javascript（没有编辑器/lint 错误）。
不需要任何特殊的 HTML 标签。
没有依赖项（jquery 或其他）。

let data = JSON.parse('{{ data | tojson }}');

【讨论】：

当使用更复杂的语法如JSON.parse('{{ url_for(\'foo.bar\', filename = \'foobar.txt\') | tojson }}');时，这会给出Uncaught SyntaxError: Unexpected token { in JSON at position 1
那很可能是一个错误。我的理解是过滤器是json.dumps 的包装器，不太确定，但我怀疑是否有人为此实现了 json 编码器。

【解决方案3】：

我知道这是一个有点老的话题，但由于它吸引了很多观点，我想有些人仍在寻找答案。

这是最简单的方法：

var name = {{name|tojson}};

它将“解析”任何“名称”并正确显示： https://sopython.com/canon/93/render-string-in-jinja-to-javascript-variable/

【讨论】：

Escape secuence for json 等同于 javascript，但是当在 json 中添加更改时，它会损坏 javascript。为了获得更好的结果，请遵守标准：var name = JSON.parse('{{ name | tojson }}');.

【解决方案4】：

我就是这样做的

我的 html 元素

<!--Proxy Tag for playlist data-->
<meta id="my_playlist_data" data-playlist="{{ playlist }}">

我的脚本元素

// use Jquery to get data from proxy Html element
var playlist_data = $('#my_playlist_data').data("playlist");

请参阅.data() 文档了解更多信息

【讨论】：

【解决方案5】：

除了将变量封装在字符串中，另一种方法是 jquery 以获取利润：

将模板语言与 javascript 混合通常是个坏主意。另一种方法是使用 html 作为代理 - 将名称存储在这样的元素中

<meta id="my-data" data-name="{{name}}" data-other="{{other}}">

然后在javascript中做

var djangoData = $('#my-data').data();

这有以下优势：

javascript 不再绑定到 .html 页面
jquery 隐式强制数据

【讨论】：

谢谢@rikAtee。我遵循相同的逻辑.. 只是我使用了普通的 div。
它有效，但是，我认为这是一个非常过分的方法 - 你的 html 文件会因数据属性而臃肿，我认为下面的答案（ndpk's）是一个更好的方法
好极了！现在我可以将 html 与 javacript 完全隔离开来。这将使我能够与 Flask-Assets 进行干净的集成。谢谢！
我很难理解 html 语法与原始问题的对应关系。 data-name 是任意字符串，还是必须是 data-name？还是从data- 开始？ other 变量从何而来？
我认为值得一提的是，您不能为元标记内的变量命名，所以首先我尝试了并且因为它不起作用。所以制作像这样的变量。从答案中必须很清楚，但由于某种原因，起初我并不清楚。

【解决方案6】：

用引号试试：

alert("{{name}}");

【讨论】：

我认为如果name 包含诸如'\n'之类的换行符，这将不起作用。它会抛出一个 javascript 语法错误。