学习Svelte/SvelteKit：form actions与on:submit的使用场景区分

一、Form Actions 和 on:submit 的适用场景 #

• on:submit（客户端处理器）：
  • 适合纯客户端的即时操作，比如表单输入格式校验、本地数据存储这类不需要后端参与的场景。
  • 优势是响应快，全程在前端完成，不用刷新页面，能给用户实时反馈。
  • 举个例子：用户输入邮箱时，立刻检查格式是否正确，提交时先验证再决定下一步。
• Form Actions（SvelteKit 服务器端处理）：
  • 主打需要和后端交互的场景：比如用户注册、数据写入数据库、需要权限校验的操作。
  • 优势是自带CSRF保护，支持无JS环境降级（普通表单提交），还能在后端处理完后直接渲染结果页面，对SEO更友好。
  • 举个例子：用户提交注册信息，后端把数据写入数据库，再返回注册成功的页面。

二、能否同时使用？ #

完全可以，通常是先用客户端的on:submit做前置校验，没问题再让表单触发Form Actions：

• 如果客户端校验不通过，调用event.preventDefault()阻止表单提交到后端；
• 校验通过后，让表单正常提交，交给Form Actions处理后端逻辑。
• 示例代码：

<script>
  function handleSubmit(event) {
    const formData = new FormData(event.target);
    const email = formData.get('email');
    if (!email.includes('@')) {
      event.preventDefault();
      alert('请输入正确的邮箱格式');
    }
  }
</script>

<form method="POST" action="?/register" on:submit={handleSubmit}>
  <input type="email" name="email" required>
  <button type="submit">注册</button>
</form>

<!-- +page.server.js -->
export const actions = {
  register: async ({ request }) => {
    const formData = await request.formData();
    // 后端处理：写入数据库、生成用户信息等
    return { success: true };
  }
};

三、向外部API发送JSON数据的操作方式 #

分两种场景选合适的方式：

1. 纯客户端直接发送（用on:submit） #

适合不需要隐藏密钥的公开API，直接在前端发起请求：

<script>
  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const payload = Object.fromEntries(formData);
    
    try {
      const response = await fetch('https://external-api.example.com/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });
      
      if (!response.ok) throw new Error('请求失败');
      const result = await response.json();
      console.log('API返回结果:', result);
    } catch (err) {
      console.error('错误:', err);
    }
  }
</script>

<form on:submit={handleSubmit}>
  <input type="text" name="username" required>
  <button type="submit">提交到外部API</button>
</form>

2. 通过SvelteKit后端转发（更安全） #

如果外部API需要密钥，直接在前端发会暴露密钥，这时候用Form Actions做中间层：

<!-- +page.svelte -->
<form method="POST" action="?/sendToExternal">
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>

<!-- +page.server.js -->
export const actions = {
  sendToExternal: async ({ request }) => {
    const formData = await request.formData();
    const payload = Object.fromEntries(formData);
    
    try {
      const response = await fetch('https://external-api.example.com/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.EXTERNAL_API_KEY}`, // 密钥存在环境变量里
        },
        body: JSON.stringify(payload),
      });
      
      if (!response.ok) throw new Error('API请求失败');
      const result = await response.json();
      return { success: true, data: result };
    } catch (err) {
      return { error: err.message };
    }
  }
};

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