如何将Django对象作为参数传递给JavaScript且不修改Python代码

首先明确原有代码的两个核心问题：

• 模板中onclick="DetailModal('{{u}}')"传递的只是Django模型对象__str__方法返回的普通字符串，不包含完整的字段信息，自然无法通过JSON.parse解析为对象
• JavaScript函数内写的{{u.author}}是服务端渲染阶段就会被替换成固定值，和点击时传入的参数完全无关，无法获取点击对应条目的动态数据

方案1：使用data-*自定义属性存储字段（推荐，逻辑最简单） #

仅需修改模板中的元素和JS函数即可，适合字段较少的场景：

模板修改 #

{% for u in all_ans_us_paginated %}
<div class="row">
    <div class="col">
        <div class="" 
             id="{{u.id}}" 
             onclick="DetailModal(this)"
             data-author="{{u.author|escapejs}}"
             data-body="{{u.body|escapejs}}"
        >
        </div>
    </div>
</div>
{% endfor %}

JS函数修改 #

function DetailModal(el) {
    // 直接从触发元素的dataset中取预存的字段值
    console.log(el.dataset.author);
    console.log(el.dataset.body);
    // 后续添加你的弹窗逻辑即可
}

escapejs过滤器用于处理字段中的特殊字符（引号、换行等），避免语法报错，建议必填

方案2：模板侧生成JSON对象传递 #

如果需要传递的字段较多，不想逐个写data属性，可以直接在模板中拼接合法JSON传递：

模板修改 #

{% for u in all_ans_us_paginated %}
<div class="row">
    <div class="col">
        <div class="" 
             id="{{u.id}}" 
             onclick="DetailModal({
                 'author': '{{u.author|escapejs}}',
                 'body': '{{u.body|escapejs}}'
             })"
        >
        </div>
    </div>
</div>
{% endfor %}

如果你使用的是Django 3.1及以上版本，还可以用内置的json_script过滤器简化写法：

{% for u in all_ans_us_paginated %}
<div class="row">
    <div class="col">
        {{ u|json_script:"user-data-"|add:u.id }}
        <div class="" 
             id="{{u.id}}" 
             onclick="DetailModal(JSON.parse(document.getElementById('user-data-{{u.id}}').textContent))"
        >
        </div>
    </div>
</div>
{% endfor %}

JS函数修改 #

function DetailModal(u) {
    // 直接拿到完整的对象使用
    console.log(u.author);
    console.log(u.body);
}

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