双独立Flask路由场景下，如何实现不跳转页面的超额数量弹窗？

核心约束严格遵循：两个Flask路由完全独立、不使用flash机制、提交后不跳转route_one页面、超阈值时触发alert提示。
原生表单提交会触发浏览器默认导航行为，直接将页面跳转至/update路径，既无法停留在原页面，也无法直接接收后端的校验结果做弹窗处理，这是之前实现失效的核心原因。

具体改造步骤 #

1. 调整route_one.html前端逻辑 #

新增逻辑阻止表单默认的跳转行为，改用异步请求提交数据，全程不刷新、不离开当前页面：

<!-- 给表单加id方便JS绑定，给数量输入框补name属性（否则后端无法接收到qty参数） -->
<form id="qtyUpdateForm" method="POST" action="/update">
  <input type="number" name="qty" value="{{ qty }}">
  <input type="submit" value="Update">
</form>

<script>
// 绑定表单提交事件
document.getElementById('qtyUpdateForm').addEventListener('submit', async (e) => {
  // 阻止原生表单的跳转提交
  e.preventDefault();
  // 构造表单提交数据
  const formData = new FormData(e.target);
  // 异步请求独立的/update接口
  const res = await fetch('/update', {
    method: 'POST',
    body: formData
  });
  // 非2xx状态码对应校验不通过，弹出后端返回的提示
  if (!res.ok) {
    alert(await res.text());
  }
});
</script>

2. 保持/update路由的独立性，调整返回值 #

路由逻辑完全独立，不需要依赖原页面的路由信息、不需要session/flash机制，仅调整响应状态码和内容给前端传校验信号即可：

from flask import request

n = 100

@app.route('/update', methods=['POST'])
def qty_update():
  # 从请求中获取提交的qty值
  qty = int(request.form.get('qty', 0))
  if qty > n:
    # 超阈值时返回400错误状态+提示文本，前端可直接接收
    return '提交的数量不能超过阈值100', 400
  # 此处保留原有正常更新的业务逻辑
  # ...
  # 符合原有逻辑返回204无内容响应
  return '', 204

最终效果 #

• 提交后全程停留在route_one.html页面，无跳转、无刷新
• 提交的qty≤100时，正常执行业务逻辑，无多余弹窗
• 提交的qty>100时，直接弹出alert提示框，内容来自后端返回的错误信息
• 两个路由完全解耦，没有共享状态、没有强制重定向，彻底绕开flash机制的限制

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