You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/03-routing.md
+51Lines changed: 51 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -267,6 +267,57 @@ The first argument to `Response` can be a [`ReadableStream`](https://developer.m
267
267
268
268
You can use the `error`, `redirect` and `json` methods from `@sveltejs/kit` for convenience (but you don't have to). Note that `throwerror(..)` only returns a plain text error response.
269
269
270
+
#### Receiving data
271
+
272
+
By exporting `POST`/`PUT`/`PATCH`/`DELETE` handlers, `+server.js` files can be used to create a complete API:
273
+
274
+
```svelte
275
+
/// file: src/routes/add/+page.svelte
276
+
<script>
277
+
let a =0;
278
+
let b =0;
279
+
let total =0;
280
+
281
+
asyncfunctionadd() {
282
+
constresponse=awaitfetch('/api/add', {
283
+
method:'POST',
284
+
body:JSON.stringify({ a, b }),
285
+
headers: {
286
+
'content-type':'application/json'
287
+
}
288
+
});
289
+
290
+
total =awaitresponse.json();
291
+
}
292
+
</script>
293
+
294
+
<input type="number" bind:value={a}>+
295
+
<input type="number" bind:value={b}>=
296
+
{total}
297
+
298
+
<button on:click={add}>Calculate</button>
299
+
```
300
+
301
+
```js
302
+
/// file: src/routes/api/add/+server.js
303
+
import { json } from'@sveltejs/kit';
304
+
305
+
/**@type{import('./$types').RequestHandler}*/
306
+
exportasyncfunctionPOST({ request }) {
307
+
const { a, b } =awaitrequest.json();
308
+
returnjson(a + b);
309
+
}
310
+
```
311
+
312
+
> In general, [form actions](/docs/form-actions) are a better way to submit data from the browser to the server.
313
+
314
+
#### Content negotiation
315
+
316
+
`+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following rules:
317
+
318
+
- `PUT`/`PATCH`/`DELETE` requests are always handled by `+server.js` since they do not apply to pages
319
+
- `GET`/`POST` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`
320
+
270
321
### $types
271
322
272
323
Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
Copy file name to clipboardExpand all lines: documentation/docs/04-advanced-routing.md
+16-2Lines changed: 16 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,7 +22,11 @@ If the number of route segments is unknown, you can use rest syntax — for exam
22
22
}
23
23
```
24
24
25
-
This also allows you to render custom 404s. Given these routes...
25
+
> `src/routes/a/[...rest]/z/+page.svelte` will match `/a/z` (i.e. there's no parameter at all) as well as `/a/b/z` and `/a/b/c/z` and so on. Make sure you check that the value of the rest parameter is valid, for example using a [matcher](#matching).
26
+
27
+
#### 404 pages
28
+
29
+
Rest parameters also allow you to render custom 404s. Given these routes...
26
30
27
31
```
28
32
src/routes/
@@ -47,7 +51,17 @@ src/routes/
47
51
└ +error.svelte
48
52
```
49
53
50
-
> `src/routes/a/[...rest]/z/+page.svelte` will match `/a/z` (i.e. there's no parameter at all) as well as `/a/b/z` and `/a/b/c/z` and so on. Make sure you check that the value of the rest parameter is valid, for example using a [matcher](#matching).
0 commit comments