如何在HTML脚本中使用Jinja变量？附Flask传参场景

嘿，这事儿其实很简单，咱们分几种常用场景来解决：

1. 直接把Jinja的rows转换成JS可用的数组/对象 #

最稳妥的方式是用Jinja的tojson过滤器，它会把Python的查询结果（列表+字典结构）转换成合法的JSON格式，这样JS就能直接解析使用了。

比如在你的updatef1.html里这么写：

<script>
// 把Jinja的rows转换成JS数组
const gameRows = {{ rows | tojson }};

// 现在就可以像操作普通JS数组一样用啦
console.log("获取到的数据：", gameRows);

// 遍历每一条数据
gameRows.forEach(row => {
  console.log("游戏ID：", row.f1game_id);
  console.log("用户ID：", row.user_id);
  // 你可以在这里用这些值做任何JS逻辑，比如填充表单、动态渲染元素等
});
</script>

为什么要用tojson？因为如果直接写const gameRows = {{ rows }}，Python的字典输出格式和JS对象语法有差异（比如单引号），会导致JS语法错误，tojson会帮你处理好所有转义和格式问题。

2. 处理单条数据的情况 #

如果你的查询结果rows只会有一条数据（比如用户编辑单条记录），可以直接取第一个元素：

<script>
// 取第一条数据，同时处理空数据的情况
const currentGame = {{ (rows[0] if rows else {}) | tojson }};

if (currentGame.f1game_id) {
  // 用这条数据做逻辑，比如给表单赋值
  document.getElementById("game-id-input").value = currentGame.f1game_id;
}
</script>

3. 通过HTML数据属性间接传递（可选方案） #

如果你不想在script标签里直接写Jinja语法，也可以把数据存在HTML元素的data-*属性里，再用JS读取：

<!-- 把数据存在隐藏的容器里 -->
<div id="game-data" style="display: none;" data-rows="{{ rows | tojson }}"></div>

<script>
// 从DOM读取数据
const dataContainer = document.getElementById("game-data");
const gameRows = JSON.parse(dataContainer.dataset.rows);

// 后续逻辑和第一种方式一样
gameRows.forEach(row => {
  // ...
});
</script>

注意事项 #

• 如果rows可能为空，一定要做判断（比如上面第二种方式里的if rows else {}），避免JS报错。
• 确保你的查询结果里的字段名和JS里使用的一致（比如row.f1game_id对应数据库里的f1game_id字段）。

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