Django项目中用JavaScript加载HTML文件出现404找不到文件问题

问题根因 #

你直接通过JS请求templates/user_table.html会返回404，因为Django的模板目录不属于静态资源目录，框架不会直接对外暴露模板文件的访问路径，前端无法直接通过HTTP GET请求获取模板文件。

解决方法 #

1. 添加模板加载视图 #

在对应Django应用的views.py中新增视图，负责渲染并返回指定模板内容：

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

def load_template(request, template_name):
    # 配置允许加载的模板白名单，避免非法访问
    allowed_templates = ['user_table.html']
    if template_name not in allowed_templates:
        return HttpResponse("访问受限", status=403)
    return render(request, template_name)

2. 配置路由映射 #

在项目（或应用）的urls.py中添加对应路由，让前端请求能匹配到上面的视图：

from django.urls import path
from .views import load_template  # 注意替换成你的视图所在路径

urlpatterns = [
    # 其他已有路由...
    path('load-template/<str:template_name>/', load_template, name='load-template'),
]

3. 修改JavaScript请求地址 #

把JS中请求模板的路径替换成刚配置的Django路由，不要直接访问templates目录：

function loadHtml(id, filename) {
    let xhttp;
    let element = document.getElementById(id);
    let file = filename;

    if (file) {
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    element.innerHTML = this.responseText;
                } else if (this.status == 404) {
                    element.innerHTML = "<h1>页面未找到</h1>";
                } else if (this.status == 403) {
                    element.innerHTML = "<h1>访问受限</h1>";
                }
            }
        };
        // 修改为Django路由地址
        xhttp.open("GET", `/load-template/${file}`, true);
        xhttp.send();
        return;
    }
}

4. 可选：用Django模板标签生成URL（更规范） #

如果触发按钮是在Django模板中，可以用{% url %}标签自动生成正确的URL，避免硬编码路径错误：

<a href="#" onclick='loadHtml("template", "user_table.html")'>加载用户表格</a>
<!-- 更严谨的写法：直接传入完整路由 -->
<a href="#" onclick='loadHtml("template", "{% url "load-template" "user_table.html" %}")'>加载用户表格</a>

注意事项 #

• 必须设置模板白名单，防止恶意用户请求敏感模板文件（如包含配置信息或用户隐私的模板）。
• 如果目标模板包含Django模板语法（如{% extends %}、{{ variable }}），只有通过视图渲染后返回，这些语法才会被正确解析。直接请求模板文件会导致语法原样输出。

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