Django多render调用内容展示问题及标题显示异常求助

1. 标题显示不完整的修复 #

你访问/hello/路径时，视图函数createPunnettSquare仅向模板传递了offsprings变量，未传入name变量，导致模板中{{ name }}为空，标题只显示"Punnett "。只需在该函数的上下文字典中添加name字段即可：

修改views.py中的createPunnettSquare函数：

def createPunnettSquare(request):
    genotype1 = "Aa"
    genotype2 = "Bb"
    l_offsprings = []
    punnett_square = [[""]*len(genotype1) for i in range(len(genotype2))]

    for i in range(len(genotype1)):
        for j in range(len(genotype2)):
            p_offspring = fill_array(request, j, i, genotype1, genotype2)
            l_offsprings.append(p_offspring)
    # 新增name字段
    dy_offsprings = {"offsprings": l_offsprings, "name": "square"}
    return render(request, 'hello.html', dy_offsprings)

2. 多个视图内容在同一页面显示的方案 #

Django中每个HTTP请求对应一个视图的响应，不同视图的render结果不会自动合并显示。要实现多个视图内容共存，可参考以下方案：

方案一：合并视图逻辑 #

将两个视图的业务逻辑整合到一个函数中，一次性把所有需要的数据传递给模板：

def combined_view(request):
    # 处理createPunnettSquare的逻辑
    genotype1 = "Aa"
    genotype2 = "Bb"
    l_offsprings = []
    for i in range(len(genotype1)):
        for j in range(len(genotype2)):
            p_offspring = fill_array(request, j, i, genotype1, genotype2)
            l_offsprings.append(p_offspring)
    # 处理sayhi的逻辑
    name = "square"
    # 合并所有数据
    context = {"offsprings": l_offsprings, "name": name}
    return render(request, 'hello.html', context)

然后修改urls.py，将目标路径指向这个合并后的视图：

urlpatterns = [
    path('hello/', views.combined_view),
    path('', views.combined_view)
]

方案二：使用模板复用 #

通过Django的{% include %}标签拆分模板，将不同视图对应的内容拆分为独立模板片段，再在主模板中引入：

1. 创建name_fragment.html片段：

<h1 class="header1"> Punnett {{ name }} </h1>

2. 创建punnett_fragment.html片段：

<div class="monohybrid">
    {% for i in offsprings %}
    <div class="mBox">{{ i }} </div>
    {% endfor %}
</div>

3. 在hello.html中引入这两个片段：

<body>
    {% include 'name_fragment.html' %}
    <h2 class="header2"> Monohybrid Crosses</h2>
    {% include 'punnett_fragment.html' %}
</body>

之后在视图中传递所有需要的变量，就能同时渲染两个片段的内容。

方案三：AJAX动态加载 #

如果需要异步加载内容，可以在页面中通过JavaScript发送AJAX请求，获取另一个视图的响应内容，再插入到页面指定位置：

// 在hello.html的body末尾添加
<script>
fetch('/')  // 请求sayhi视图的路径
  .then(response => response.text())
  .then(data => {
    // 提取标题部分并替换现有标题
    const titleMatch = data.match(/<h1 class="header1">(.*?)<\/h1>/);
    if (titleMatch) {
      document.querySelector('.header1').innerHTML = titleMatch[1];
    }
  });
</script>

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