Django静态JS文件加载失败：home.html中static标签失效求助

一、修复Django静态文件标签失效问题 #

1. 补充STATICFILES_DIRS配置 #

在settings.py中添加以下配置——STATIC_ROOT仅用于部署阶段收集静态文件，开发环境下需要通过STATICFILES_DIRS指定静态文件的实际存放路径：

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

2. 配置开发环境静态文件路由 #

在项目根目录的urls.py中添加静态文件服务路由，确保开发时Django能正确返回静态资源：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的现有路由配置
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

3. 统一静态文件引入规范 #

将nav.html中的硬编码路径替换为static标签，避免路径不一致导致的加载问题：

{% load static %}
<script src="{% static 'js/home.js' %}"></script>

确认home.html中的{% load static %}标签位于模板最顶部（模板继承场景下，父模板已加载的话子模板可省略，但显式加载更稳妥），且标签格式无误：

{% load static %}
<script src="{% static 'js/home.js' %}"></script>

二、修复JS代码语法错误 #

打开static/js/home.js，将错误的$ajax修正为$.ajax——这是jQuery Ajax方法的正确写法，语法错误会直接导致点击事件逻辑无法执行：

// 错误写法
$ajax({ ... });

// 正确写法
$.ajax({ ... });

三、验证步骤 #

1. 重启Django开发服务器，确保所有配置生效；
2. 打开浏览器开发者工具（F12），切换到Network标签，刷新页面，检查home.js的请求状态是否为200；
3. 切换到Console标签，确认无JS语法错误提示；
4. 测试按钮点击事件，验证功能是否正常。

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