如何简单将Django的Python变量传入HTML并实现操作、动态生成元素

前置修正：你当前的传参错误 #

你原来的render方法传参写法错误，render的第三个参数仅接收一个上下文字典，你拆分传了两个字典，第二个字典的内容根本不会传入模板，这也是你没法正常获取product_list等变量的核心原因，正确的传参写法如下：

def displayhome(request):
    # 把所有要传给模板的变量都放在同一个context字典里
    context = {
        'title': product_list[0].title,
        'link': product_list[0].official_path_name,
        'product_list': product_list, # 直接传整个列表到模板
        'box_num': 4 # 你需要的生成盒子的整数变量
    }
    return render(request, 'bootstrap/index.html', context)

问题1：通过整数变量生成对应数量的HTML元素 #

Django模板的{% %}标签支持基础的逻辑操作，不需要写原生Python，完全可以实现循环生成元素的需求，官方不推荐把复杂业务逻辑写在模板里，仅用模板处理展示层逻辑即可。

实现步骤： #

1. 视图层把要遍历的可迭代对象传入上下文，最简单的方式是直接把整数转成range对象传入：

# 视图层补充到context里
context['box_count'] = range(4)

2. 模板层用{% for %}循环标签遍历生成元素：

{% for item in box_count %}
    <!-- 这里写你要生成的容器盒子代码，会循环生成4次 -->
    <div class="container-box">第{{ forloop.counter }}个盒子</div>
{% endfor %}

说明：forloop.counter是Django循环内置变量，从1开始计数当前循环的次数。 #

问题2：Python变量传入JavaScript实现逻辑 #

完全可以，按照变量类型不同，传值方式有区别：

1. 普通基础类型（数字、字符串等） #

直接在JS代码中用模板语法赋值即可，字符串类型需要加引号，同时加escapejs过滤器防止注入风险：

<script>
// 数字类型直接取值
const boxNum = {{ box_num }};
// 字符串类型加引号，加过滤
const pageTitle = "{{ title|escapejs }}";

// 拿到变量后就可以用JS生成DOM
for(let i=0;i<boxNum;i++){
    let box = document.createElement('div');
    box.className = 'container-box';
    box.innerText = `第${i+1}个盒子`;
    document.body.appendChild(box);
}
</script>

2. 复杂类型（列表、字典等） #

需要在视图层先把数据转成JSON字符串，再传入模板：

# 视图层代码
import json
context['product_list_json'] = json.dumps(list(Product.objects.values()))

模板中解析JSON即可使用：

<script>
const productList = JSON.parse("{{ product_list_json|escapejs }}");
console.log(productList); // 可以拿到完整的产品列表数据，用JS随便操作
</script>

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