如何在 Flask 中提交表单后不刷新页面清空表单？-html教程-PHP中文网

如何在 Flask 中提交表单后不刷新页面清空表单？

本文介绍在 flask 应用中实现“无页面刷新清空表单”的正确方案：通过 ajax 提交 + 后端 json 响应 + 前端 dom 重置，避免传统重定向导致的 ux 断裂，同时彻底解决重复提交和残留数据问题。

本文介绍在 flask 应用中实现“无页面刷新清空表单”的正确方案：通过 ajax 提交 + 后端 json 响应 + 前端 dom 重置，避免传统重定向导致的 ux 断裂，同时彻底解决重复提交和残留数据问题。

在构建如 To-Do List 这类交互密集型 Flask 应用时，用户期望表单提交后页面保持稳定（不跳转、不闪烁），新任务即时显示，且输入框自动清空——这正是现代单页体验（SPA-like）的核心诉求。但需明确：纯 Flask + 模板渲染无法真正“不刷新”完成清空；若强行用 redirect(url_for('today'))，虽能清除表单数据并防止重复提交（即经典的 POST-Redirect-GET 模式），却必然触发整页重载，违背“无刷新”需求。

✅ 正确解法是前后端协同的 AJAX 方案：

1. 后端：返回结构化 JSON 响应（非重定向）

修改路由，对 POST 请求返回 JSON，而非重定向或完整 HTML：

from flask import request, jsonify

@app.route('/app/today', methods=['POST', 'GET'])
@login_required
def today():
    if request.method == 'POST':
        form = AddTask()
        projects = [(p.id, p.title) for p in Project.query.filter_by(user_id=current_user.id).all()]
        form.project.choices = projects

        if form.validate_on_submit():
            project = Project.query.get(form.project.data)
            new_task = Task(
                title=form.title.data,
                description=form.description.data,
                project=project,
                due_date_time=form.due_date_time.data,
                priority_level=int(form.priority.data),
                user_id=current_user.id
            )
            db.session.add(new_task)
            db.session.commit()
            return jsonify({
                'success': True,
                'message': 'Task added successfully',
                'task': {
                    'id': new_task.id,
                    'title': new_task.title,
                    'description': new_task.description or '',
                    'project_title': project.title,
                    'due_date': new_task.due_date_time.strftime('%Y-%m-%d') if new_task.due_date_time else None,
                    'priority': new_task.priority_level
                }
            })
        else:
            return jsonify({
                'success': False,
                'errors': dict(form.errors)  # 如 {'title': ['This field is required.']}
            }), 400

    # GET 请求：正常渲染页面
    form = AddTask()
    projects = [(p.id, p.title) for p in Project.query.filter_by(user_id=current_user.id).all()]
    form.project.choices = projects
    pending_tasks = Task.query.filter_by(user_id=current_user.id, completed_status=False).all()
    return render_template('today.html',
        day_and_date=datetime.today().strftime('%a %b %d'),
        new_task_form=form,
        user_projects=projects,
        pending_tasks_length=len(pending_tasks),
        pending_tasks=pending_tasks
    )

2. 前端：AJAX 提交 + 动态清空 + 列表更新

修改 HTML 表单，移除 action 和 method，用 JavaScript 控制提交逻辑：

<div class="new_task_form">
  <form id="task-form">
    {{ new_task_form.hidden_tag() }}
    <div>
      {{ new_task_form.title.label }} {{ new_task_form.title(class="form-control") }}
      <span class="error" id="title-error"></span>
    </div>
    <div>
      {{ new_task_form.description.label }} {{ new_task_form.description(class="form-control") }}
    </div>
    <div>
      {{ new_task_form.project.label }} {{ new_task_form.project(class="form-select") }}
    </div>
    <div>
      {{ new_task_form.due_date_time.label }} {{ new_task_form.due_date_time(class="form-control") }}
    </div>
    <div>
      {{ new_task_form.priority.label }}
      {% for subfield in new_task_form.priority %}
        <div class="form-check">
          {{ subfield(class="form-check-input") }} {{ subfield.label(class="form-check-label") }}
        </div>
      {% endfor %}
    </div>
    <button type="submit" class="btn btn-primary">Add Task</button>
  </form>
</div>

<!-- 待办列表容器（用于动态插入） -->
<div id="pending-tasks-list">
  {% for task in pending_tasks %}
    <div class="task-item" data-id="{{ task.id }}">
      <strong>{{ task.title }}</strong> — {{ task.project.title }}
      {% if task.due_date_time %}? {{ task.due_date_time|date('%b %d') }}{% endif %}
    </div>
  {% endfor %}
</div>

添加 JavaScript（使用原生 Fetch API）：

<script>
document.getElementById('task-form').addEventListener('submit', async function(e) {
  e.preventDefault();

  const formData = new FormData(this);
  // 手动添加 CSRF token（Flask-WTF 要求）
  formData.append('csrf_token', '{{ csrf_token() }}');

  try {
    const res = await fetch('/app/today', {
      method: 'POST',
      body: formData
    });

    const data = await res.json();

    if (res.ok && data.success) {
      // ✅ 清空所有字段（含 Select 和 Radio）
      this.reset(); // 原生 reset() 可清空 input/select/textarea，但 radio/checkbox 需额外处理
      document.querySelectorAll('input[type="radio"]').forEach(r => r.checked = false);
      document.querySelectorAll('.error').forEach(el => el.textContent = '');

      // ✅ 动态追加新任务到列表（可选：平滑动画）
      const taskEl = document.createElement('div');
      taskEl.className = 'task-item';
      taskEl.dataset.id = data.task.id;
      taskEl.innerHTML = `
        <strong>${data.task.title} — ${data.task.project_title}
        ${data.task.due_date ? `? ${data.task.due_date}` : ''}
      `;
      document.getElementById('pending-tasks-list').prepend(taskEl);

      // ✅ 可选：显示成功提示
      alert('Task added!');
    } else {
      // ❌ 显示验证错误
      Object.entries(data.errors).forEach(([field, errors]) => {
        const errorEl = document.getElementById(`${field}-error`);
        if (errorEl) {
          errorEl.textContent = errors.join(', ');
        }
      });
    }
  } catch (err) {
    console.error('Submission failed:', err);
    alert('Network error. Please try again.');
  }
});
</script>

⚠️ 关键注意事项

CSRF 安全不可省略：AJAX 提交必须携带 csrf_token()，否则 Flask-WTF 会拒绝请求。可通过 {{ csrf_token() }} 渲染到模板，再在 JS 中注入。
form.reset() 的局限性：它能清空和
服务端校验仍是基石：前端清空只是 UX 优化，所有业务逻辑与数据验证必须在后端完成。
错误反馈要精准：将 form.errors 以字典形式返回，前端按字段 ID 绑定错误信息，提升可维护性。

通过此方案，你获得的是真正的无刷新体验：表单秒清、任务即时呈现、无重复提交风险、符合 RESTful 设计原则——这才是生产级 Flask 应用应有的交互标准。