SvelteKit中无JS的DELETE/PUT/PATCH处理的当前及未来兼容最佳实践

在SvelteKit中处理无JS的非GET/POST请求，目前最兼容且符合未来版本要求的方案是POST表单配合方法覆盖，具体实现如下：

前端表单配置 #

HTML原生表单仅支持GET和POST方法，因此我们需要以POST作为表单提交方法，再通过隐藏字段指定实际要发送的HTTP动词：

<!-- 删除请求示例 -->
<form method="post" action="/items/123">
  <input type="hidden" name="_method" value="DELETE">
  <button type="submit">删除该项目</button>
</form>

<!-- 更新请求（PUT）示例 -->
<form method="post" action="/items/123">
  <input type="hidden" name="_method" value="PUT">
  <label>
    项目名称：
    <input type="text" name="name" value="原有名称">
  </label>
  <button type="submit">保存修改</button>
</form>

服务器端路由处理 #

SvelteKit会自动识别_method字段，并将请求的method替换为对应的值，你可以直接在路由的+server.js/ts文件中导出对应HTTP方法的处理函数：

// src/routes/items/[id]/+server.js
export async function DELETE({ params }) {
  // 执行删除逻辑，比如删除ID为params.id的项目
  return new Response(JSON.stringify({ success: true }), { status: 200 });
}

export async function PUT({ request, params }) {
  const formData = await request.formData();
  const newName = formData.get('name');
  // 执行更新逻辑
  return new Response(JSON.stringify({ success: true, name: newName }), { status: 200 });
}

关于_method的说明 #

你看到的讨论中提到的_method“弃用”，是针对旧版use:enhance相关的表单增强逻辑，而非无JS场景下的方法覆盖机制。当前SvelteKit完全支持并保留这一方案，它符合Web标准，且能兼容未来版本。

额外提示 #

• 确保表单的action属性指向正确的动态路由（比如/items/[id]对应具体项目ID）
• 若需要处理表单验证失败的情况，可以在服务器端返回重定向并携带错误信息，无JS场景下浏览器会自动跳转并展示对应内容

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