无需页面刷新，从Django模型动态加载数据至模板的实现方案

我有如下Django模型，并通过前3个字段在模板中生成了树形视图：

class operationTemplates(models.Model):
    templateID = models.IntegerField(primary_key = True)
    templateCategory = models.CharField(max_length=255, blank=True, null=True)
    templateName = models.CharField(max_length=400, blank=True, null=True)
    templatePreopBundle = models.TextField( blank=True, null=True)
    templateIndication = models.TextField( blank=True, null=True)
    templatePosition = models.TextField( blank=True, null=True)
    templateProcedure = models.TextField( blank=True, null=True)
    templateClosure = models.TextField( blank=True, null=True)
    templatePostOpInstructions = models.TextField( blank=True, null=True)

模板中的树形视图代码：

<!-- tree view -->
<ul class="tree">
    <li>
        <input type="checkbox" id="c0" />
        <label class="tree_label" for="c0">Vascular Surgery</label>
        <ul>
            {% for k, v in group.items %}
            <li>
              <input type="checkbox"  id="c{{forloop.counter}}" />
              <label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
              <ul>
                  {% for x in v %}
                    <li><span class="tree_label"><a href="{{ x.templateID }}">{{ x.templateName }}</a></span></li>
                  {% endfor %}
              </ul>
            </li>
            {% endfor %}
        </ul>
    </li>
</ul>
<!-- tree view end-->

需求：用户点击树形视图的叶子节点时，无需刷新页面，查询并展示该记录对应的所有模型字段。请问最佳实现方式是什么？是否需要使用JSON/JavaScript？或是仅用Django和HTML即可实现的优雅方案？

1. AJAX（JSON+JavaScript）方案（推荐，实现无刷新体验） #

这是满足无刷新需求的最优方案，具体步骤如下：

步骤1：编写Django视图返回JSON数据

在views.py中添加视图，根据templateID查询记录并返回JSON格式数据：

from django.http import JsonResponse
from .models import operationTemplates

def get_template_details(request, template_id):
    try:
        template = operationTemplates.objects.get(templateID=template_id)
        # 将模型字段转为字典
        data = {
            'templateID': template.templateID,
            'templateCategory': template.templateCategory,
            'templateName': template.templateName,
            'templatePreopBundle': template.templatePreopBundle,
            'templateIndication': template.templateIndication,
            'templatePosition': template.templatePosition,
            'templateProcedure': template.templateProcedure,
            'templateClosure': template.templateClosure,
            'templatePostOpInstructions': template.templatePostOpInstructions
        }
        return JsonResponse(data)
    except operationTemplates.DoesNotExist:
        return JsonResponse({'error': '模板不存在'}, status=404)

在urls.py中配置对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('template/<int:template_id>/', views.get_template_details, name='template_details'),
]

步骤2：修改模板，添加详情容器与可点击标识

添加用于展示详情的容器，并修改叶子节点的元素，绑定模板ID：

<!-- 新增详情展示容器 -->
<div id="template-details" style="margin-top:20px; padding:10px; border:1px solid #eee;"></div>

<!-- 修改树形视图的叶子节点 -->
<ul class="tree">
    <!-- 其他代码保持不变 -->
    {% for x in v %}
        <li><span class="tree_label template-item" data-id="{{ x.templateID }}">{{ x.templateName }}</span></li>
    {% endfor %}
    <!-- 其他代码保持不变 -->
</ul>

步骤3：编写JavaScript实现无刷新请求与渲染

在模板底部添加JS代码，监听点击事件，发送请求并渲染详情：

<script>
document.addEventListener('DOMContentLoaded', () => {
    const detailContainer = document.getElementById('template-details');
    const templateItems = document.querySelectorAll('.template-item');

    templateItems.forEach(item => {
        item.addEventListener('click', () => {
            const templateId = item.getAttribute('data-id');
            // 发送AJAX请求
            fetch(`/template/${templateId}/`)
                .then(res => res.json())
                .then(data => {
                    if (data.error) {
                        detailContainer.innerHTML = `<p>${data.error}</p>`;
                        return;
                    }
                    // 渲染详情内容
                    let html = `<h3>${data.templateName}</h3>`;
                    html += `<p><strong>分类:</strong> ${data.templateCategory || '无'}</p>`;
                    html += `<p><strong>术前准备:</strong> ${data.templatePreopBundle || '无'}</p>`;
                    html += `<p><strong>适应症:</strong> ${data.templateIndication || '无'}</p>`;
                    html += `<p><strong>体位:</strong> ${data.templatePosition || '无'}</p>`;
                    html += `<p><strong>手术步骤:</strong> ${data.templateProcedure || '无'}</p>`;
                    html += `<p><strong>缝合方式:</strong> ${data.templateClosure || '无'}</p>`;
                    html += `<p><strong>术后指导:</strong> ${data.templatePostOpInstructions || '无'}</p>`;
                    detailContainer.innerHTML = html;
                })
                .catch(err => {
                    detailContainer.innerHTML = `<p>加载失败，请重试</p>`;
                    console.error(err);
                });
        });
    });
});
</script>

2. 纯Django+HTML方案（无JS，但会刷新页面） #

如果不需要无刷新体验，可以直接让节点跳转到详情页：

• 编写详情页视图，渲染包含所有字段的模板
• 修改a标签的href为{% url 'template_detail' x.templateID %}
  但这种方式会触发页面刷新，不符合无刷新需求，仅作为备选方案。

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