如何从SvelteKit页面调用服务器函数？求Hello World示例

下面提供两种直观的实现方式，满足你从页面按钮触发、传参并获取服务器返回结果的需求：

方法1：独立API路由方式 #

这种方式适合通用的后端接口，可被多个页面调用。

服务器端（创建 src/routes/api/greet/+server.js） #

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

export async function POST({ request }) {
  // 解析前端传入的JSON参数
  const { input } = await request.json();
  // 简单的逻辑处理：输入hello返回world
  const responseMsg = input === 'hello' ? 'world' : `未知输入：${input}`;
  return json({ message: responseMsg });
}

前端页面（比如 src/routes/+page.svelte） #

<script>
  let inputText = 'hello';
  let serverResponse = '';

  async function triggerServerCall() {
    try {
      const res = await fetch('/api/greet', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ input: inputText })
      });
      const data = await res.json();
      serverResponse = data.message;
    } catch (error) {
      serverResponse = '调用失败，请检查网络或服务器配置';
    }
  }
</script>

<div>
  <input bind:value={inputText} placeholder="输入内容" />
  <button on:click={triggerServerCall}>调用服务器</button>
  {#if serverResponse}
    <p>服务器返回：{serverResponse}</p>
  {/if}
</div>

方法2：页面专属Action方式 #

这是SvelteKit推荐的页面级数据操作方案，无需额外创建独立API路由。

服务器端（src/routes/+page.server.js） #

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

export async function actions({ request }) {
  // 解析表单格式的参数
  const formData = await request.formData();
  const input = formData.get('input');

  if (!input) {
    return fail(400, { missingInput: true });
  }

  const responseMsg = input === 'hello' ? 'world' : `未知输入：${input}`;
  return { success: true, message: responseMsg };
}

前端页面（src/routes/+page.svelte） #

<script>
  let inputText = 'hello';
  let serverResponse = '';

  async function callPageAction() {
    try {
      const formData = new FormData();
      formData.append('input', inputText);

      const res = await fetch('/', {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json'
        }
      });

      const data = await res.json();
      if (data.success) {
        serverResponse = data.message;
      } else {
        serverResponse = '请输入参数';
      }
    } catch (error) {
      serverResponse = '调用失败';
    }
  }
</script>

<div>
  <input bind:value={inputText} placeholder="输入内容" />
  <button on:click={callPageAction}>调用服务器函数</button>
  {#if serverResponse}
    <p>服务器返回：{serverResponse}</p>
  {/if}
</div>

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