Svelte中表单提交至服务端后，如何在同页面渲染提交的数据？

你原来的方案行不通的核心原因有两个：

1. SvelteKit的每个请求都是独立的，模块级别的变量（比如你定义的requestData）不会在请求之间共享，也无法在load和action之间传递状态；
2. 表单提交后页面重新渲染时，load函数会先于action执行，导致你读取的requestData还未被赋值。

下面提供两种无需前端fetch的正确实现方式：

方式一：直接通过Action返回数据，页面读取$page.form #

这是同页面提交场景下最简单的方案，Action处理完表单后直接返回数据，页面通过SvelteKit内置的page store读取提交结果。

修改+page.server.js #

export const actions = {
    default: async ({ request }) => {
        // 服务端处理逻辑：读取表单数据
        const formData = await request.formData();
        // 转换为普通对象方便页面使用
        const submitData = Object.fromEntries(formData);

        // 可在这里添加其他服务端逻辑，比如数据验证、存入数据库等

        // 直接返回处理后的数据
        return {
            success: true,
            data: submitData
        };
    }
};

修改+page.svelte #

<script>
    import { page } from '$app/stores';
</script>

<!-- 表单提交到当前页面的默认Action -->
<form method="POST">
    <input type="text" name="id" placeholder="输入ID" />
    <button type="submit">提交</button>
</form>

<!-- 展示提交后的结果 -->
{#if $page.form?.data}
    <div class="result">
        <h3>提交的数据：</h3>
        <pre>{JSON.stringify($page.form.data, null, 2)}</pre>
    </div>
{/if}

方式二：使用Flash消息传递数据（适合需要重定向的场景） #

如果业务需要提交后重定向回当前页面（或其他页面），可以用Flash消息将数据存入临时Cookie，再通过load函数读取并展示。

修改+page.server.js #

import { redirect } from '@sveltejs/kit';

export const actions = {
    default: async ({ request, cookies }) => {
        const formData = await request.formData();
        const submitData = Object.fromEntries(formData);

        // 服务端逻辑处理...

        // 将数据存入Flash Cookie（仅保留到下一次请求）
        cookies.set('submit_data', JSON.stringify(submitData), {
            path: '/',
            httpOnly: true,
            maxAge: 60 // 1分钟有效期足够完成跳转
        });

        // 重定向回当前页面，触发load函数读取Flash数据
        throw redirect(303, '/');
    }
};

export const load = async ({ cookies }) => {
    // 读取Flash Cookie中的数据
    const submitData = cookies.get('submit_data');
    
    // 读取后立即删除Cookie，避免重复展示
    if (submitData) {
        cookies.delete('submit_data', { path: '/' });
        return { data: JSON.parse(submitData) };
    }

    return { data: null };
};

修改+page.svelte #

<script>
    export let data;
</script>

<form method="POST">
    <input type="text" name="id" placeholder="输入ID" />
    <button type="submit">提交</button>
</form>

{#if data}
    <div class="result">
        <h3>提交的数据：</h3>
        <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
{/if}

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