Django中如何通过JavaScript函数跳转至指定HTML模板页面

一、核心问题：按钮跳转失效的修复 #

你当前的按钮放在<form>标签内，点击会触发表单默认提交行为（刷新页面），直接打断JS跳转逻辑；同时JS里的跳转路径不符合Django路由规则，必须改用框架生成的合法URL。

1. 修改HTML表单与按钮 #

给按钮添加type="button"，彻底避免表单默认提交：

<form>
    <div class="form-group">
        <label for="Password1">Enter Admin code</label>
        <input type="password" class="form-control" id="Password1">
    </div>
    <div class="modal-footer justify-content-center">
        <button class="LogInBtn" id="LogInBtn" type="button">LogIn</button>
    </div>
</form>

2. 修正JS跳转逻辑与路径 #

单独的静态JS文件无法直接使用Django模板标签，先在HTML中传递合法URL，再在JS中调用：

• HTML中添加全局变量（放在静态JS引入前）：

{% load static %}
<script>
    // 用Django反向解析生成合法路由
    const addStylistUrl = "{% url 'addstylist' %}";
</script>
<script src="{% static 'validateadmin.js' %}"></script>

• 修正validateadmin.js（补全缺失的闭合括号，替换跳转路径）：

document.getElementById("LogInBtn").onclick = function () { 
    var code = document.getElementById("Password1").value; 
    
    if(code === "") {  
        alert("**请输入密码！");  
        return false;  
     }  
    else if(code === "famu") {  
        alert("管理员登录中...");  
        window.location.href = addStylistUrl;
     } 
     else{  
        alert("验证码无效，无法登录 :(");
     }
};

二、静态JS文件的正确引入路径 #

1. 确认项目静态文件结构 #

按Django规范整理静态文件位置：

你的项目/
    目标app/
        static/
            validateadmin.js  <!-- 或放在static/js/validateadmin.js -->

2. 确保settings.py配置正确 #

已配置的前提下，确认关键参数：

STATIC_URL = '/static/'
# 开发环境可添加静态文件目录配置
STATICFILES_DIRS = [BASE_DIR / "static"]

3. HTML中正确引入JS #

用{% static %}标签匹配文件路径：

{% load static %}
<!-- 若JS在static根目录 -->
<script src="{% static 'validateadmin.js' %}"></script>
<!-- 若JS在static/js子目录 -->
<script src="{% static 'js/validateadmin.js' %}"></script>

三、额外优化提示 #

• 前端密码验证仅做辅助，实际项目中必须在后端完成核心验证（避免前端代码泄露验证规则）
• 养成代码闭合习惯，你原JS代码缺失最后一个}，会导致逻辑报错

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