Skip to main content

在 加载数据 的章节，我们见过了如何从服务器获取数据到浏览器。有时候你需要相反的操作，即把数据从浏览器发送给服务器，这就引出了 <form>，网页平台用来提交数据的方式。

让我们来搭建一个代办应用。我们有一个由 src/lib/server/database.js 文件配置的内存数据库，还有在 src/routes/+page.server.js 文件中使用 cookies API 的 load 函数，这样我们就可以为每一个用户单独设置代办列表。但是我们还需要添加一个 <form> 来创建新的代办：

src/routes/+page.svelte
<h1>todos</h1>

<form method="POST">
	<label>
		add a todo:
		<input
			name="description"
			autocomplete="off"
		/>
	</label>
</form>

<ul class="todos">

如果你在 <input> 中输入些什么然后回车，浏览器会向当前页面发送一个 POST 请求（因为表单设置了 method="POST" 属性）。但是这会引发一个错误，因为我们还没有在服务端创建相应的 操作 来处理这个 POST 请求。让我们现在添加：

src/routes/+page.server.js
import * as db from '$lib/server/database.js';

export function load({ cookies }) {
	// ...
}

export const actions = {
	default: async ({ cookies, request }) => {
		const data = await request.formData();
		db.createTodo(cookies.get('userid'), data.get('description'));
	}
};

request 参数是一个标准的 Request 对象；await request.formData() 返回一个 FormData 实例。

当我们回车之后，数据库就会更新，页面也会重新加载新的数据。

注意我们不必写任何 fetch 代码，数据会自动更新。而且因为我们使用的是 <form> 元素，这个应用即便在 JavaScript 被禁用或者无法使用时依然能正常工作。

Next: 命名的表单操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
	export let data;
</script>
 
<div class="centered">
	<h1>todos</h1>
 
	<ul class="todos">
		{#each data.todos as todo (todo.id)}
			<li>
				{todo.description}
			</li>
		{/each}
	</ul>
</div>
 
<style>
	.centered {
		max-width: 20em;
		margin: 0 auto;
	}
 
	label {
		width: 100%;
	}
 
	input {
		flex: 1;
	}
 
	span {
		flex: 1;
	}
 
	button {
		border: none;
		background: url(./remove.svg) no-repeat 50% 50%;
		background-size: 1rem 1rem;
		cursor: pointer;
		height: 100%;
		aspect-ratio: 1;
		opacity: 0.5;
		transition: opacity 0.2s;
	}
 
	button:hover {
		opacity: 1;
	}
 
	.saving {
		opacity: 0.5;
	}
</style>
initialising