SvelteKit表单提交不刷新页面且保留Toast的最优方案

直接用SvelteKit官方提供的enhance表单动作，这是比preventDefault+手动fetch更优雅的方案——它既能阻止页面刷新、保留store状态，又不会破坏表单的原生默认行为（比如HTML5表单验证）。

实现步骤： #

1. 导入enhance动作
   在/login/+page.svelte中，从$app/forms导入enhance：

   <script>
     import { enhance } from '$app/forms';
     import { toastStore } from '$lib/stores'; // 你的toast可写store
     import { goto } from '$app/navigation';
   </script>
   

2. 给表单绑定use:enhance
   给登录表单添加use:enhance指令，同时传入回调函数处理服务器返回的结果：

   <form 
     method="POST" 
     use:enhance={async ({ formData, update }) => {
       // 触发服务器端动作
       const response = await update();
       // 解析服务器返回的JSON数据
       const result = await response.json();
   
       // 根据结果设置toast
       if (result.success) {
         toastStore.set('登录成功！');
         // 登录成功后跳转页面（可选）
         await goto('/');
       } else {
         toastStore.set(result.error || '登录失败，请重试');
       }
     }}
   >
     <input type="email" name="email" required placeholder="邮箱" />
     <input type="password" name="password" required placeholder="密码" />
     <button type="submit">登录</button>
   </form>
   

3. 调整服务器端逻辑
   在/login/+page.server.js中，返回JSON格式的结果供客户端解析：

   export const actions = {
     default: async ({ request }) => {
       const formData = await request.formData();
       const email = formData.get('email');
       const password = formData.get('password');
   
       // 数据库验证逻辑示例
       if (email === 'test@example.com' && password === '123456') {
         // 这里可添加设置session等操作
         return new Response(JSON.stringify({ success: true }), {
           headers: { 'Content-Type': 'application/json' }
         });
       } else {
         return new Response(JSON.stringify({ 
           success: false, 
           error: '邮箱或密码错误' 
         }), {
           headers: { 'Content-Type': 'application/json' },
           status: 401
         });
       }
     }
   };
   

为什么这是更优方案？ #

• 保留原生行为：表单的HTML5验证（如required属性）依然生效，无需手动实现验证逻辑
• 减少冗余代码：enhance自动处理表单数据序列化、请求发送等细节，不用手动写fetch逻辑
• 避免store清空：页面完全不刷新，toast的可写store状态能正常保留并显示
• 生态兼容：完美适配SvelteKit的服务端动作、导航系统等原生能力

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