SvelteKit Superforms 中如何阻止表单提交时的页面刷新

在 SvelteKit 应用开发中，表单处理是一个常见需求。SvelteKit Superforms 作为一个强大的表单库，提供了便捷的表单处理能力。本文将重点探讨如何在使用 Superforms 时阻止表单提交导致的页面刷新问题。

问题背景

在传统 HTML 表单中，当用户提交表单时，浏览器会默认刷新页面。这通常不是现代单页应用(SPA)期望的行为。开发者通常会使用 event.preventDefault() 方法来阻止这种默认行为。

当使用 SvelteKit Superforms 时，开发者可能会遇到类似情况：在 onSubmit 回调中执行 API 调用时，页面仍然会刷新，导致异步操作中断。

解决方案

SvelteKit Superforms 提供了两种主要方式来处理这个问题：

1. 使用 cancel 函数
   在 onSubmit 回调的参数解构中，可以获取到 cancel 函数，调用它可以阻止表单的默认提交行为：

   onSubmit: async ({ formData, cancel }) => {
     cancel(); // 阻止表单默认提交
     // 执行自定义逻辑
   }
   

2. 启用 SPA 模式
   Superforms 提供了 SPA(单页应用)模式，专门为不需要整页刷新的场景设计。在这种模式下，表单提交不会导致页面刷新，而是完全在客户端处理。

   const { form, enhance } = superForm(dataForm, {
     spa: true // 启用SPA模式
   });
   

最佳实践建议

对于大多数现代 SvelteKit 应用，推荐使用 SPA 模式，因为它：

• 提供了更流畅的用户体验
• 避免了不必要的页面刷新
• 保持了应用状态
• 简化了表单处理逻辑

只有在需要特殊控制表单提交行为时，才考虑使用 cancel 函数手动干预。

实现示例

以下是一个完整的实现示例，展示了如何在 SvelteKit Superforms 中同时使用 SPA 模式和自定义提交逻辑：

<script>
  import { superForm } from 'sveltekit-superforms';

  const { form, errors, enhance } = superForm(dataForm, {
    spa: true,
    onSubmit: async ({ formData }) => {
      const data = Object.fromEntries(formData.entries());
      try {
        const response = await fetch('/api/data', {
          method: 'POST',
          body: JSON.stringify(data)
        });
        // 处理响应
      } catch (error) {
        // 错误处理
      }
    }
  });
</script>

<form use:enhance>
  <!-- 表单字段 -->
</form>

通过这种方式，开发者可以完全控制表单提交行为，同时享受 SvelteKit Superforms 提供的各种便利功能。