本文介绍如何在 Jinja2 模板中将循环生成的 Python 对象（如 project）安全、可靠地传递给前端 JavaScript 函数，避免 XSS 风险与 JSON 解析错误，推荐使用 data-* 属性 + tojson 过滤器 + Bootstrap 模态框事件监听方案。
本文介绍如何在 jinja2 模板中将循环生成的 python 对象（如 `project`）安全、可靠地传递给前端 javascript 函数，避免 xss 风险与 json 解析错误，推荐使用 `data-*` 属性 + `tojson` 过滤器 + bootstrap 模态框事件监听方案。
在 Web 开发中，常需在服务端渲染的循环列表（如项目表格）中，为每行“编辑”按钮绑定对应的数据对象，以便点击时在模态框中动态填充表单。直接在 onclick 中内联调用 drawModal.bind(this, '{{ project | tojson }}') 表面可行，但存在多个隐患：
- tojson 生成的 JSON 字符串若未被正确包裹在引号内，会导致 JS 语法错误（如 onclick="fn({\"id\":1})" 缺少外层引号则解析失败）；
- 内联事件处理逻辑难以维护，且易引入 XSS 漏洞（尤其当数据含用户输入时）；
- 多次重复绑定或 DOM 操作可能引发性能与作用域问题。
✅ *推荐方案：解耦数据与行为，利用 HTML5 `data-` 属性 + Bootstrap 模态框生命周期事件**
步骤一：Jinja2 模板中安全注入数据
使用 | tojson 过滤器将 Python 对象序列化为标准 JSON 字符串，并通过 data-project 属性嵌入按钮——该过滤器自动转义特殊字符，确保输出符合 HTML 和 JSON 双重要求：
{% for project in projects.items %}
<tr>
<td>{{ project.project_id }}</td>
<td>{{ project.name }}</td>
<!-- 其他字段... -->
<td>
<button
type="button"
class="btn btn-sm btn-primary"
data-bs-toggle="modal"
data-bs-target="#edit-modal"
data-project="{{ project | tojson }}"> {# 安全注入完整对象 #}
Edit
</button>
</td>
</tr>
{% endfor %}⚠️ 注意：data-project 的值是纯字符串，无需额外引号；浏览器会自动将其作为字符串存储，jQuery .data() 方法会智能解析 JSON。
立即学习“Java免费学习笔记（深入）”；
步骤二：JavaScript 端监听模态框打开事件
利用 Bootstrap 5 的 show.bs.modal 事件（在模态框显示前触发），通过 e.relatedTarget 获取触发按钮，再读取其 data-project 属性：
<!-- 确保已引入 jQuery 和 Bootstrap JS -->
<script>
$(document).ready(function() {
$('#edit-modal').on('show.bs.modal', function (e) {
// 从触发按钮获取绑定的 project 数据（自动解析为 JS 对象）
const project = $(e.relatedTarget).data('project');
// 安全填充模态框表单字段（假设模态框内有对应 ID 的 input 元素）
$(this).find('#modal-project-id').val(project.project_id || '');
$(this).find('#modal-project-name').val(project.name || '');
$(this).find('#modal-external-id').val(project.external_id || '');
$(this).find('#modal-company-name').val(project.company_name || '');
$(this).find('#modal-note').val(project.note || '');
// 如需保留原始对象供后续提交，可存入模态框 data 属性
$(this).data('editing-project', project);
});
// （可选）监听模态框隐藏事件，清理临时数据
$('#edit-modal').on('hidden.bs.modal', function () {
$(this).removeData('editing-project');
});
});
</script>关键优势与注意事项
- ✅ 安全性：| tojson 过滤器对 , &, ', " 等字符进行 HTML 实体转义，杜绝 XSS；
- ✅ 健壮性：.data('project') 自动调用 JSON.parse()，无需手动 JSON.parse() 或 eval()；
- ✅ 可维护性：数据绑定与业务逻辑完全分离，修改字段只需调整模板和 JS 填充逻辑；
- ⚠️ 兼容性提示：确保 Bootstrap 版本 ≥5.0（事件名 show.bs.modal），旧版请用 shown.bs.modal；
- ⚠️ 空值处理：Jinja2 中 project.company_name | default('', true) 与 JS 端 project.company_name || '' 协同保障空值安全；
- ? 进阶建议：对于复杂表单或大量字段，可封装通用填充函数，或使用 Object.entries(project).forEach(...) 动态映射。
此方案兼顾安全性、可读性与工程实践，是 Flask/Django 等 Jinja2 应用中前后端数据桥接的标准解法。
