Flask登录成功后无法跳转至指定页面问题求助

错误1：success视图函数缺少返回值 #

在app.py的success函数中，调用render_template但未用return返回结果，导致该视图不会向浏览器返回任何响应，即便跳转成功也会显示空白或报错。

修复代码：

@app.route('/success')
def success():
    print('success')
    return render_template(r'Home.html')  # 补充return语句

错误2：独立JS文件无法解析Flask模板语法 #

validation.js是静态资源文件，Flask不会对其进行模板渲染，因此{{ url_for('success') }}会被当作纯字符串传递给浏览器，无法转换成实际的跳转URL。

修复方案二选一： #

方案1：将JS代码内嵌到index.html模板中

把validation.js的内容直接放到index.html的<script>标签里，让Flask解析模板语法：

<script>
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "user" && password === "user123") {
        alert("You have successfully logged in.");
        window.location.replace("{{ url_for('success') }}");
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})
</script>

方案2：在模板中暴露全局URL变量

在index.html中先定义全局变量存储跳转URL，再引入JS文件：

<!-- 在引入validation.js之前添加 -->
<script>
const successRedirectUrl = "{{ url_for('success') }}";
</script>
<script src="{{ url_for('static', filename='validation.js') }}"></script>

然后修改validation.js中的跳转代码：

window.location.replace(successRedirectUrl);

额外注意事项 #

• 确保Home.html存在于templates目录下，否则render_template会抛出模板不存在的错误。
• 若后续要实现真实后端验证，建议把登录逻辑放到POST请求的视图中，避免前端硬编码用户名密码的安全问题。

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