点击按钮发起GET请求成功却未跳转至checkout.html的问题咨询

嘿，这个问题我太熟了——你用$.get()发送的是AJAX请求，它的设计初衷是在不刷新页面的情况下悄悄和服务器交互，所以哪怕服务器成功返回了checkout.html的内容，浏览器也不会自动跳转到新页面，只会把内容藏在AJAX的响应里。

为啥会这样？ #

$.get()是jQuery的异步请求方法，它不会触发浏览器的默认页面跳转行为。你的Flask端点/checkout确实正确返回了checkout.html，但这些内容只是被AJAX请求接收了，并没有被用来替换当前页面或者触发跳转。

两种靠谱的解决办法 #

方法1：放弃AJAX，用普通跳转（最简洁） #

最简单的方式是把按钮改成普通链接，或者用表单提交，让浏览器自动处理跳转：

• 改成链接（可以用CSS做成按钮样式）：

  <a href="/checkout" id="order-button" style="padding: 8px 16px; background: #007bff; color: white; border-radius: 4px; text-decoration: none;">Order</a>
  

• 或者用表单提交：

  <form action="/checkout" method="GET">
    <input type="submit" id="order-button" value="Order">
  </form>
  

  （这里直接用type="submit"就不用写onclick了，更简洁）

方法2：保留AJAX，手动处理跳转（适合需要前置操作的场景） #

如果必须用AJAX（比如点击按钮前要做前端验证、数据处理），可以在AJAX的回调函数里手动处理页面内容或者跳转：

function clickProcessOrder() {
  // 这里可以加前置验证逻辑，比如检查购物车是否为空
  $.get("/checkout", function(response) {
    // 选项1：把当前页面的内容替换成checkout.html的内容
    document.body.innerHTML = response;
    // 选项2：直接跳转到/checkout页面（和直接访问效果一致）
    window.location.href = "/checkout";
  });
}

不过选项2其实和直接用方法1没区别，除非你需要在跳转前做一些异步操作，否则没必要多此一举。

关于你的Flask端点 #

放心，你的/checkout端点代码完全没问题，它能正确返回checkout.html的内容。只要用上面的方法触发正确的跳转行为，浏览器就能正常显示这个页面啦。

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