POST และการส่งข้อมูล
ส่งข้อมูล JSON พร้อมตัวเลือกคำขอ
POST และการส่งข้อมูล เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การส่งข้อมูลไปยังเซิร์ฟเวอร์
หากต้องการสร้างหรือปรับปรุงข้อมูล คุณต้องส่งคำขอที่มีเนื้อหา fetch รองรับการทำเช่นนี้ผ่านออบเจ็กต์ตัวเลือกที่ส่งเป็นอาร์กิวเมนต์ตัวที่สอง
การกำหนดเมธอด
กำหนด method ให้เป็นคำกริยา HTTP ที่ต้องการ: POST เพื่อสร้าง PUT/PATCH เพื่อปรับปรุง และ DELETE เพื่อลบ
fetch(url, { method: "POST" });การเพิ่มเนื้อหา JSON
API ส่วนใหญ่คาดหวังข้อมูล JSON ให้แปลงออบเจ็กต์ของคุณเป็นสตริงด้วย JSON.stringify แล้วใส่ไว้ใน body
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});ส่วนหัว Content-Type
แจ้งเซิร์ฟเวอร์ว่าเนื้อหาเป็น JSON โดยกำหนด Content-Type: application/json หากไม่กำหนด เซิร์ฟเวอร์อาจอ่านข้อมูลที่ส่งไปผิดรูปแบบ
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});การอ่านการตอบกลับ
โดยปกติเซิร์ฟเวอร์จะตอบกลับด้วยทรัพยากรที่สร้างขึ้น ให้อ่านข้อมูลด้วยวิธีเดียวกับ GET โดยใช้ response.json()
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();ฟังก์ชันสร้างข้อมูลแบบสมบูรณ์
รวบรูปแบบนี้ไว้ในฟังก์ชันที่นำกลับมาใช้ซ้ำได้ ฟังก์ชันนี้รับข้อมูล ส่งข้อมูล และส่งคืนการตอบกลับจากเซิร์ฟเวอร์
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT และ PATCH
ใช้ PUT เพื่อแทนที่ทรัพยากรทั้งหมด และใช้ PATCH เพื่ออัปเดตเฉพาะบางฟิลด์ รูปแบบเนื้อความจึงแตกต่างกันตามนั้น
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});การส่งข้อมูลแบบฟอร์ม
สำหรับการอัปโหลดไฟล์หรือการส่งแบบฟอร์ม ให้ใช้วัตถุ FormData เป็นเนื้อความของคำขอ อย่ากำหนดส่วนหัวประเภทเนื้อหาด้วยตนเอง เบราว์เซอร์จะเพิ่มขอบเขตแบบหลายส่วนที่ถูกต้องให้
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });การยืนยันตัวตน
ปลายทางที่ได้รับการป้องกันต้องใช้ข้อมูลรับรอง ให้ส่งโทเค็นในส่วนหัว Authorization พร้อมกับส่วนหัวประเภทเนื้อหา
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});คุกกี้และข้อมูลรับรอง
โดยค่าเริ่มต้น ฟังก์ชันส่งคำขอจะไม่ส่งคุกกี้ข้ามต้นทาง ให้กำหนด credentials: "include" เมื่อเซิร์ฟเวอร์ใช้เซสชันที่อาศัยคุกกี้
fetch(url, { method: "POST", credentials: "include", body: payload });ข้อควรระวังในการแปลงเป็นสตริง
โปรดจำไว้ว่า body ต้องเป็นสตริง (หรือ FormData/ข้อมูลไบนารี) การส่งวัตถุดิบจะส่ง [object Object] ไปแทน ควรใช้ JSON.stringify กับวัตถุก่อนเสมอ
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenตรวจสอบความเข้าใจ
การส่งข้อมูลเจสันด้วย POST
สรุป
ส่งข้อมูลโดยกำหนด method body และส่วนหัว สำหรับข้อมูลเจสัน ให้ใช้ JSON.stringify กับวัตถุและกำหนด Content-Type: application/json ใช้ FormData สำหรับการอัปโหลด (ไม่ต้องกำหนดส่วนหัวประเภทเนื้อหาเอง) เพิ่ม Authorization สำหรับการยืนยันตัวตน และใช้ credentials: "include" สำหรับคุกกี้ อ่านการตอบกลับด้วย response.json()
คำถามที่พบบ่อย
บทเรียน “POST และการส่งข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “POST และการส่งข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “POST และการส่งข้อมูล”
ส่งข้อมูล JSON พร้อมตัวเลือกคำขอ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “POST และการส่งข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การส่งคำขอ GET
- POST และการส่งข้อมูล
- การจัดการข้อผิดพลาดและรหัสสถานะ
- การยกเลิกคำขอด้วย AbortController