Flask披萨网站支付按钮点击后页面无法跳转问题求助

• 检查JavaScript是否阻止默认跳转行为
  若支付按钮绑定了点击事件且代码中调用了event.preventDefault()，会直接阻止浏览器的默认跳转动作。比如：

  document.getElementById('pay-btn').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转
    // 支付逻辑代码
    // 未添加手动跳转的话，页面不会变化
  });
  

  解决方式：

  • 若无需先执行JS逻辑，直接删除e.preventDefault()；
  • 若需要先完成支付逻辑再跳转，在逻辑执行完毕后添加手动跳转代码：

    // 支付逻辑完成后
    window.location.href = "{{ url_for('success_page') }}";
    

• 处理异步请求后的跳转逻辑
  如果支付按钮通过AJAX/Fetch向/payment路由发送请求，即便Flask返回重定向，浏览器也不会自动跳转——因为异步请求的响应需要手动处理。以Fetch为例：

  fetch('/payment', { method: 'GET' })
    .then(response => {
      if (response.ok) {
        // 检测是否为重定向响应
        if (response.redirected) {
          window.location.href = response.url;
        } else {
          // 直接跳转到指定成功页面
          window.location.href = "{{ url_for('success') }}";
        }
      }
    });
  

  Flask端需确保路由返回正确的重定向：

  @app.route('/payment')
  def payment():
      # 执行支付处理逻辑
      return redirect(url_for('success'))
  

• 验证Flask路由返回值
  确认/payment路由没有误返回模板页面。如果写成return render_template('payment.html')，服务器会返回200状态码，但只是返回页面内容而非重定向指令，自然不会触发跳转。必须使用redirect()函数返回重定向响应。

• 排查浏览器控制台报错
  按F12打开浏览器开发者工具，查看Console标签页是否存在JS语法错误、路径无效等问题。比如url_for生成的地址不正确，会导致跳转失败但无明显提示。

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