在JavaScript中使用Flask模板传递的process参数问题

方法1：直接在JavaScript中嵌入模板变量 #

Flask的模板渲染是服务器端完成的，可直接把模板变量写入JavaScript代码，字符串类型记得加引号：

const processValue = "{{ process }}";
console.log(processValue); // 输出'abc'

如果变量包含特殊字符或为JSON格式，用tojson过滤器避免转义问题：

const processValue = {{ process|tojson }};

方法2：修复DOM获取逻辑 #

若坚持用document.getElementById，需确认以下几点：

• HTML元素必须存在对应id，比如：

<!-- 用隐藏输入框存储变量 -->
<input type="hidden" id="process" value="{{ process }}">
<!-- 或显示在普通元素中 -->
<div id="process">{{ process }}</div>

• JavaScript需在DOM加载完成后执行，可把代码放在</body>标签前，或用加载事件监听：

document.addEventListener('DOMContentLoaded', function() {
    const processElement = document.getElementById('process');
    // 输入框用.value，普通元素用.textContent
    const processValue = processElement.tagName === 'INPUT' ? processElement.value : processElement.textContent;
    console.log(processValue);
});

之前无效大概率是JS执行时DOM未渲染完成、元素id写错，或是普通元素误用.value获取内容。

方法3：通过data属性传递变量 #

在HTML元素上设置data属性，再用JS读取：

<div id="app" data-process="{{ process }}"></div>

JS中读取方式：

const appElement = document.getElementById('app');
const processValue = appElement.dataset.process;
console.log(processValue);

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