Receiving data

By exporting POST/PUT/PATCH/DELETE handlers, +server.js files can be used to create a complete API:

+page.svelte

// src/routes/add/+page.svelte
<script>
  let a = 0
  let b = 0
  let total = 0
 
  async function add() {
    const response = await fetch("/api/add", {
      method: "POST",
      body: JSON.stringify({ a, b }),
      headers: {
        "content-type": "application/json",
      },
    })
 
    total = await response.json()
  }
</script>
 
<input type="number" bind:value="{a}" /> + <input type="number" bind:value="{b}" /> = {total}
 
<button on:click="{add}">Calculate</button>

+server

// src/routes/api/add/+server.ts
 
import { json } from "@sveltejs/kit"
import type { RequestHandler } from "./$types"
 
export const POST = (async ({ request }) => {
  const { a, b } = await request.json()
  return json(a + b)
}) satisfies RequestHandler

Note

In general, form actions are a better way to submit data from the browser to the server.

Backlinks