提交表单后显示Spinner的实现需求（Flask后端计算重定向场景）

核心思路 #

表单提交时拦截默认跳转行为，通过JavaScript先显示加载Spinner，再用fetch发送表单数据，等后端计算完成并返回重定向响应后，再手动跳转到目标页面。

1. 前端实现（HTML+CSS+JS） #

先编写Spinner的结构和样式，再给表单绑定提交事件逻辑：

HTML结构

<!-- 提交表单 -->
<form id="calcForm" action="/" method="POST">
  <input type="text" name="num1" placeholder="输入数字1" required>
  <input type="text" name="num2" placeholder="输入数字2" required>
  <button type="submit">开始计算</button>
</form>

<!-- 加载Spinner（默认隐藏） -->
<div id="loadingSpinner" style="display: none; margin-top: 20px; text-align: center;">
  <div style="border: 4px solid #eee; border-top: 4px solid #2563eb; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
  <p>计算中，请稍候...</p>
</div>

CSS动画（嵌入style标签即可）

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript提交逻辑

document.getElementById('calcForm').addEventListener('submit', async function(e) {
  // 阻止表单默认刷新提交
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  const spinner = document.getElementById('loadingSpinner');
  
  // 显示Spinner
  spinner.style.display = 'block';
  
  try {
    // 发送请求到Flask后端
    const response = await fetch(this.action, {
      method: 'POST',
      body: formData
    });
    
    // 后端返回重定向后，跳转到目标页面
    if (response.redirected) {
      window.location.href = response.url;
    }
  } catch (err) {
    // 错误处理：隐藏Spinner并提示用户
    spinner.style.display = 'none';
    alert('提交失败，请重试');
  }
});

2. Flask后端配合 #

后端无需特殊修改，正常处理计算逻辑后返回重定向即可：

from flask import Flask, render_template, request, redirect, url_for
import time

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # 模拟耗时计算（替换为你的实际业务逻辑）
        time.sleep(3)
        
        num1 = int(request.form.get('num1'))
        num2 = int(request.form.get('num2'))
        result = num1 * num2
        
        # 计算完成后重定向到结果页
        return redirect(url_for('result_page', total=result))
    return render_template('index.html')

@app.route('/result')
def result_page():
    total = request.args.get('total')
    return f'<h2>计算结果：{total}</h2>'

if __name__ == '__main__':
    app.run(debug=True)

关键注意事项 #

• 必须拦截表单默认提交行为，否则页面会直接刷新，Spinner无法正常显示。
• 利用fetch的redirected属性判断后端重定向响应，再手动跳转页面。
• Spinner的样式可根据需求自定义，比如调整颜色、大小或添加文字提示。

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