Django模板中引入的JavaScript文件无响应无报错问题求助

1. 先确认JS文件是否成功加载 #

• 打开页面后按F12打开开发者工具，切换到「网络」面板，刷新页面，搜索post.js：
  • 如果返回404，属于静态文件路径配置问题，继续看第2部分
  • 如果返回200且没触发你写的alert弹窗，看第3部分
  • 如果alert弹窗触发了但点击按钮无响应，看第4部分

2. 静态文件路径问题排查 #

• 确认你的network应用已经添加到settings.py的INSTALLED_APPS列表中，Django只有注册过的应用才会自动扫描其下的static目录
• 确认静态文件目录结构正确，必须是如下结构：

  network/
  └── static/
      └── network/
          └── post.js
  

• 如果你是本地开发环境，需要在项目根目录的urls.py（不是app下的urls.py）中添加静态文件服务配置：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 你原来的路由配置
  ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

3. 模板块渲染问题排查 #

• 右键点击页面，选择「查看网页源代码」，确认页面中是否存在<script src="/static/network/post.js"></script>这行代码
• 如果没有这行代码，说明父模板network/layout.html中没有定义{% block script %}块，两种解决方案：
  • 把你写在block script里的script标签移到block body的末尾
  • 在父模板layout.html的</body>标签前添加{% block script %}{% endblock %}

4. JS代码逻辑问题排查 #

• 你当前JS代码中点击事件要修改#heading元素的内容，但你提供的index.html中没有id为heading的元素，需要确认父模板layout.html中是否存在该id的元素，不存在的话点击事件执行时会报错
• 可以修改JS代码加调试信息，方便排查：

  document.addEventListener('DOMContentLoaded', function(){
    const btn = document.querySelector('#btn')
    const heading = document.querySelector('#heading')
    console.log('找到的按钮:', btn)
    console.log('找到的heading元素:', heading)
    if(btn){
      btn.onclick = function(e){
        e.preventDefault() // 防止默认提交行为
        if(heading){
          heading.innerHTML = 'hello'
        }else{
          alert('未找到heading元素')
        }
      }
    }
  })
  
  alert("Hello, Welcome to Javatpoint"); 
  

• 打开开发者工具的「控制台」面板，可以看到打印的调试信息以及JS执行报错信息。

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