Flask应用中通过jQuery实现页面跳转的问题求助

为什么你的代码无效？ #

Flask只会对templates文件夹下的模板文件执行Jinja2语法渲染，而static目录下的JS文件是直接作为静态资源返回给浏览器的，不会经过模板引擎处理。所以你写的{{url_for ('home_page')}}会被浏览器当作普通字符串，不会解析成实际的首页URL，自然无法跳转。

解决方法 #

方法1：在模板中传递URL给JS

在引用你的jquery.js之前，在模板页面（比如base.html或者首页模板）里添加一段脚本，用Jinja生成正确的URL并赋值给全局变量：

<script>
  // 定义全局变量存储首页URL
  const homePageUrl = "{{ url_for('home_page') }}";
</script>
<!-- 再引入你的静态JS文件 -->
<script src="{{ url_for('static', filename='script/jquery.js') }}"></script>

然后在jquery.js里直接使用这个全局变量：

window.location.href = homePageUrl;

方法2：直接写固定路由（不推荐）

如果你的首页路由是固定的（比如根路径/），可以直接在JS里写死URL：

window.location.href = "/";

缺点是如果后续修改了home_page对应的路由，你需要手动修改JS里的路径，维护成本高。

方法3：通过HTML元素的data属性传递URL

如果是绑定在某个交互元素（比如按钮）上的跳转，可以给元素添加data属性存储URL：

<!-- 在模板里的按钮上添加data属性 -->
<button id="backToHome" data-url="{{ url_for('home_page') }}">返回首页</button>

然后在jquery.js中获取这个属性值来跳转：

$('#backToHome').on('click', function() {
  window.location.href = $(this).data('url');
});

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