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

Question

我如何将jinja2数据传递给javascript.我有一个Flask REST URL,因为/logs/<test_case_name> 我正在尝试.getJSON()查询上面的URL,因此希望传递具有testcasename .getJSON功能的jinja2数据.

示例代码:

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

它不起作用.有什么建议吗？

Answer 1

试试报价:

alert("{{name}}");

Answer 2

除了将变量封装在字符串中之外,替代方法是获取利润的jquery:

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

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

然后在javascript中做

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

这有利于:

我很难理解html语法如何与原始问题相对应.`data-name`是一个任意字符串,还是必须是`data-name`？或者只是从`data -`开始？`other`变量来自哪里？ (2认同)
我认为值得一提的是，您不能为元标记内的变量指定任何名称，所以首先我尝试了 <meta id="geodata" test="{{test}}"> ，因为它不起作用。因此，创建这样的变量 <meta id="geodata" data-test="{{test}}">。答案一定很清楚，但由于某种原因，我一开始并不清楚。 (2认同)

Answer 3

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

这是最简单的方法：

var name = {{name|tojson}};

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

Answer 4

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

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

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

Answer 5

我就是这样做的

我的 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()文档