如何在Django模板for循环中使用json_script获取object.id

步骤1：用json_script传递后端数据到前端 #

在模板的合适位置（比如表格上方或页面底部），使用json_script标签将object_list（或仅提取对象ID列表）安全序列化为JSON：

{# 传递完整的对象列表 #}
{{ object_list|json_script:"objects-data" }}

{# 或者仅传递对象ID列表，更轻量 #}
{{ object_list|pluck:"id"|json_script:"object-ids" }}

这个标签会生成一个类型为application/json的<script>标签，自动处理转义，避免XSS风险和JS语法错误。

步骤2：修改模板元素添加标识 #

为表格的行或单元格添加data-*属性，方便点击时快速关联对象ID（比依赖id属性更灵活）：

{% for object in object_list %}
   <tr data-object-id="{{ object.id }}">
      <td>{{ object.id }}</td>
   </tr>
{% endfor %}

步骤3：在JavaScript中解析数据并绑定点击事件 #

编写JS代码，先解析json_script输出的JSON数据，再为每个表格行绑定点击事件获取对应ID：

// 解析完整对象列表
const objects = JSON.parse(document.getElementById('objects-data').textContent);

// 或者解析仅ID列表
// const objectIds = JSON.parse(document.getElementById('object-ids').textContent);

// 绑定点击事件
document.querySelectorAll('tr[data-object-id]').forEach(row => {
  row.addEventListener('click', function() {
    // 获取当前点击行的对象ID
    const currentId = this.getAttribute('data-object-id');
    
    // 如果需要使用对象的其他属性，从解析后的JSON中查找
    const targetObj = objects.find(obj => obj.id == currentId);
    
    // 执行你的业务逻辑，比如打印ID或操作对象数据
    console.log('触发事件的对象ID:', currentId);
    if (targetObj) {
      console.log('对应对象详情:', targetObj);
    }
  });
});

为什么用json_script？ #

直接在JS中写const id = {{ object.id }}虽然简单，但存在潜在风险：如果ID包含特殊字符或为字符串类型，会导致JS语法错误；而json_script会自动处理所有转义操作，严格遵循JSON格式，是Django官方推荐的后端数据传递到前端的安全方式。

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