如何从Django HTML模板向JS脚本传递多个参数

问题原因排查 #

你当前多变量传递写法失效的常见原因有两个：

1. 表单校验失败的场景下，视图返回的上下文里不存在start_grid，也没有合法的gameoflifeform.iterations.value，模板渲染时会抛出变量不存在的错误，或者JS读取不到对应ID的元素报错。
2. JS脚本里没有同时读取两个ID对应的内容，只写了单个变量的读取逻辑。

方案1：保留多json_script写法的修复方案 #

HTML模板中增加变量存在性判断，避免无效场景下的渲染错误：

{% if animation %}
{{ gameoflifeform.iterations.value | json_script:"iterations"}}
{{ start_grid | json_script:"start-grid" }}
{% endif %}
<script
  type="text/javascript"
  src="{% static 'js/runGameOfLife.js' %}"
></script>

JS中同时读取两个变量，增加元素存在性校验避免报错：

const iterationsEl = document.getElementById('iterations')
const startGridEl = document.getElementById('start-grid')
if (iterationsEl && startGridEl) {
  const iterations = JSON.parse(iterationsEl.textContent)
  const startGrid = JSON.parse(startGridEl.textContent)
  console.log(iterations, startGrid)
  // 后续业务逻辑
}

最优实现方案：单对象打包传递 #

将所有需要传递给JS的变量封装为单个字典，仅用一次json_script输出，减少冗余标签，更易维护。

1. 首先修改视图层，提前封装JS所需参数（逻辑聚合在后端，更易管理）：

def home(request):
    if request.method == 'POST':
        params = GameOfLifeForm(request.POST)
        if params.is_valid():
            starting_grid = get_starting_grid(params.cleaned_data)
            # 统一封装所有需要传给JS的参数
            js_config = {
                'iterations': params.cleaned_data['iterations'],
                'start_grid': starting_grid
            }
            to_html = {
                'animation': True,
                'gameoflifeform': params,
                'js_config': js_config
            }
        else:
            to_html = {
                'animation': False,
                'warning_msg': 'Something went wrong. Try once again.'
            }
        return render(request, 'get_animations/home.html', to_html)
    else:
        form = GameOfLifeForm()
        return render(request, 'get_animations/home.html', {'gameoflifeform': form})

2. HTML模板仅需要输出一次配置：

{% if animation %}
{{ js_config | json_script:"game-of-life-config" }}
{% endif %}
<script
  type="text/javascript"
  src="{% static 'js/runGameOfLife.js' %}"
></script>

3. JS单次读取即可获取所有参数：

const configEl = document.getElementById('game-of-life-config')
if (configEl) {
  const { iterations, start_grid: startGrid } = JSON.parse(configEl.textContent)
  console.log(iterations, startGrid)
  // 后续业务逻辑
}

该方案的优势：

• 后续新增要传递的参数只需要修改js_config字典，不需要新增DOM节点
• 统一做存在性判断，避免多个变量遗漏校验的问题
• 自动继承Django json_script 过滤器的安全转义能力，避免XSS风险

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