如何将Django上下文变量传入JavaScript函数

简单类型变量（字符串、数字、布尔值） #

如果queues是字符串、数字这类简单数据，直接给模板变量加对应引号即可：

<!-- 字符串类型加单/双引号包裹 -->
<button onclick="func('{{ queues }}')">点击触发</button>

<!-- 数字/布尔类型可省略引号 -->
<button onclick="func({{ queues }})">点击触发</button>

复杂类型变量（列表、字典） #

如果queues是列表、字典这类结构化数据，有两种安全实现方案：

• 方案1：使用Django内置json_script标签（推荐，无XSS风险）

<!-- 先在模板任意位置将变量渲染为JSON script节点 -->
{{ queues|json_script:"queues-data" }}

<!-- 按钮调用函数 -->
<button onclick="func()">点击触发</button>

<script>
function func() {
  // 从DOM节点读取并解析为JS对象
  const queues = JSON.parse(document.getElementById('queues-data').textContent);
  // 这里写你原本func的业务逻辑
}
</script>

• 方案2：使用safe过滤器（仅适合变量内容完全可控的场景）

<button onclick="func({{ queues|safe }})">点击触发</button>

注：该方案存在XSS注入风险，若queues包含用户输入的不可控内容禁止使用。

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