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

Posted 2023-02-23

【中文标题】无法将 jinja2 变量传递到 javascript 代码段中

【英文标题】：Unable to pass jinja2 variables into javascript snippet

【发布时间】：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();

【参考方案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 语法错误。