PricingLoginStart free
Sveltejs Academy · บทเรียน

+page.server.js พร้อม actions

กำหนดตัวจัดการ action แบบมีชื่อและแบบเริ่มต้นใน +page.server.js เพื่อประมวลผลข้อมูลแบบฟอร์ม

บทเรียน 1 จาก 413 ขั้นตอน

+page.server.js พร้อม actions เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

บทนำการดำเนินการของแบบฟอร์ม

SvelteKit ช่วยให้คุณจัดการการส่งแบบฟอร์มบนเซิร์ฟเวอร์ผ่านตัวจัดการการดำเนินการใน +page.server.js

การดำเนินการเริ่มต้น

ส่งออกออบเจ็กต์ actions พร้อมตัวจัดการ default สำหรับแบบฟอร์มที่ไม่ได้ระบุชื่อ

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    // ...
  }
};

องค์ประกอบแบบฟอร์ม

แบบฟอร์มจะส่งข้อมูลไปยัง URL ปัจจุบัน จึงไม่จำเป็นต้องใช้แอตทริบิวต์ action

<form method="POST">
  <input name="email" />
  <button>Submit</button>
</form>

การดำเนินการที่มีชื่อ

สามารถมีการดำเนินการหลายรายการในไฟล์เดียวได้ โดยอ้างอิงตามชื่อในแอตทริบิวต์ action ของแบบฟอร์ม

export const actions = {
  login: async (event) => { ... },
  signup: async (event) => { ... }
};

การเรียกใช้การดำเนินการที่มีชื่อ

อ้างอิงด้วย ?/name ใน action ของแบบฟอร์ม

<form method="POST" action="?/login">

การอ่านข้อมูลแบบฟอร์ม

ใช้ await request.formData() เพื่ออ่านช่องข้อมูลที่ส่งมา

const data = await request.formData();
const email = data.get("email");

การส่งคืนข้อมูล

ส่งคืนออบเจ็กต์ ซึ่งจะกลายเป็นพร็อพ form ของหน้า

return { success: true };

เปลี่ยนเส้นทางหลังสำเร็จ

ใช้ redirect() เพื่อเปลี่ยนเส้นทางหลังการดำเนินการสำเร็จ

ข้อผิดพลาดในการตรวจสอบข้อมูล

ใช้ fail() เพื่อแสดงข้อผิดพลาดในการตรวจสอบข้อมูลฝั่งไคลเอนต์ (จะเรียนในบทถัดไป)

มีข้อมูลเฉพาะคำขอพร้อมใช้

คุณเข้าถึงข้อมูลการยืนยันตัวตนได้ผ่าน locals ที่กำหนดไว้ใน hooks

เฉพาะเซิร์ฟเวอร์

เช่นเดียวกับ load การดำเนินการจะทำงานเฉพาะบนเซิร์ฟเวอร์ ดังนั้นการเรียกฐานข้อมูลจึงปลอดภัย

ตรวจสอบอย่างรวดเร็ว

การดำเนินการอยู่ที่ใด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

ส่งออกออบเจ็กต์ actions จาก +page.server.js เพื่อจัดการคำขอ POST ใช้การดำเนินการที่มีชื่อเมื่อต้องจัดการหลายแบบฟอร์ม

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
41
บทเรียน
163
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “+page.server.js พร้อม actions” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “+page.server.js พร้อม actions” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “+page.server.js พร้อม actions”

กำหนดตัวจัดการ action แบบมีชื่อและแบบเริ่มต้นใน +page.server.js เพื่อประมวลผลข้อมูลแบบฟอร์ม คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “+page.server.js พร้อม actions” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. +page.server.js พร้อม actions
  2. คำสั่ง use:enhance
  3. การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม
  4. การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions
← กลับไปที่ Sveltejs Academy