Django如何通过Ajax向模板传递context，无需重写已有前端代码？

核心逻辑是复用原有Django模板语法，让后端完成模板片段渲染后直接返回给前端插入，几乎不需要改动原有业务代码，远比重写前端HTML的成本低。 #

1. 拆分模板片段 #

把需要Ajax更新的区域对应的HTML内容，从原有完整模板中单独抽离为子模板，原有完整模板通过include引用该子模板，保证非Ajax请求的原有渲染逻辑完全不受影响。
示例：
原有the.html中需要更新的区域代码：

<div id="div_to_update">
    <!-- 原有模板代码，包含所有你已经写好的Django模板变量、循环、判断逻辑 -->
    {% for item in list %}
    <p>{{ item.title }}</p>
    {% endfor %}
</div>

抽离为子模板partial_the.html，内容就是上述div内部的所有原模板代码，不需要做任何修改。
然后the.html对应位置修改为：

<div id="div_to_update">
    {% include 'partial_the.html' %}
</div>

2. 调整后端视图逻辑 #

原有生成context的业务代码完全不用修改，仅需新增Ajax请求判断，Ajax请求时仅渲染抽离的子模板返回即可：

from django.shortcuts import render
from django.http import HttpResponse

def your_view(request):
    # 你原有生成context的所有代码完全复用
    context = {
        # 原有的所有context键值对
    }
    # 新增Ajax请求判断
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        # 直接用原有context渲染子模板，返回渲染后的HTML字符串
        rendered_partial = render(request, 'partial_the.html', context).content.decode('utf-8')
        return HttpResponse(rendered_partial)
    # 非Ajax请求走原有完整页面渲染逻辑
    return render(request, 'the.html', context)

3. 前端Ajax回调直接插入内容 #

不需要重写任何HTML结构，直接把后端返回的渲染好的HTML插入对应容器即可：

$.ajax({
    url: "你的接口地址",
    type: "GET",
    success: function (res) {
        $("#div_to_update").html(res);
    }
})

如果你确实需要类似前端直接传入context渲染的能力，可以引入前端模板引擎（如Handlebars、artTemplate等），把Django模板的语法转换为对应前端模板引擎的语法，前端拿到context后直接渲染即可，但该方案改动量远大于上述后端渲染模板片段的方案，非必要不推荐。

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