Django发起Ajax请求时如何正确引入指定HTML模板文件？

失效原因 #

Django的模板标签{% include %}是服务端渲染阶段执行的逻辑，页面返回给浏览器后模板引擎就不再工作了。你写在Ajax回调里的模板标签不会被解析，只会被当成普通字符串处理，因此无法实现预期效果。

最优实现方案 #

你不需要拆分模板内容到当前文件，只需要通过后端接口返回渲染后的模板片段即可，步骤如下：

方案1：新增独立接口返回模板片段（逻辑更清晰） #

1. 新增视图函数，专门返回渲染后的recommendations.html内容

# views.py
from django.shortcuts import render, get_object_or_404
from .models import Project

def get_project_recommendations(request, project_id):
    project = get_object_or_404(Project, id=project_id)
    # 传入模板需要的所有上下文参数，和普通模板渲染逻辑一致
    return render(request, 'projects/recommendations.html', {"project": project})

2. 绑定对应路由

# urls.py
urlpatterns = [
    # 其他现有路由
    path("project/<int:project_id>/recommendations/", get_project_recommendations, name="project-recommendations"),
]

3. 修改前端Ajax代码，直接将接口返回的内容插入目标区域

$.ajax({
    url: "{% url 'project-recommendations' project_object.id %}",
    type: 'get',
    success: function (response) {
        $("#div1").html(response);
    }
})

方案2：复用现有project-detail接口（无需新增路由） #

如果不想新增独立接口，可以在原有视图中加Ajax请求判断，返回不同内容：

# 你原来的project-detail视图
def project_detail(request, project_id):
    project = get_object_or_404(Project, id=project_id)
    context = {"project_object": project}
    # 判断是否为Ajax请求
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        return render(request, 'projects/recommendations.html', context)
    # 非Ajax请求返回完整页面
    return render(request, 'projects/project_detail.html', context)

前端直接请求原有接口即可，不需要改Ajax的url参数。

注意事项 #

如果recommendations.html内有绑定的DOM事件，动态插入到页面后原有事件会失效，建议使用事件委托绑定，或者在Ajax的success回调中重新绑定事件。

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