JavaScript ที่ใช้ fetch() เพื่อส่งข้อมูลแบบ POST ไปยัง API และรับผลลัพธ์กลับมาเป็นข้อความ

ตัวอย่างโค้ด JavaScript ชุดนี้ใช้คำสั่ง fetch() เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่าน HTTP แบบ POST โดยกำหนด Content-Type เป็น application/x-www-form-urlencoded ซึ่งเป็นรูปแบบเดียวกับการส่งข้อมูลจากฟอร์ม HTML ข้อมูลที่ส่งไปคือ name=John และ age=30

จากนั้นเมื่อเซิร์ฟเวอร์ตอบกลับมา โค้ดจะรับผลลัพธ์และแปลงให้อยู่ในรูปแบบข้อความด้วย response.text() แล้วนำข้อความที่ได้ไปแสดงทั้งใน Console เพื่อใช้ตรวจสอบ และแสดงบนหน้าเว็บผ่าน element ที่มี id="output" หากระหว่างการร้องขอเกิดข้อผิดพลาด เช่น เซิร์ฟเวอร์ไม่ตอบหรือเชื่อมต่อไม่ได้ ระบบจะเข้าสู่ส่วน catch เพื่อแสดงรายละเอียดของ error ใน Console ซึ่งช่วยให้สามารถตรวจสอบและแก้ไขปัญหาได้ง่ายขึ้น

ตัวอย่าง JavaScript

fetch("https://example.com/api/echo", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "name=John&age=30"
})
.then(response => response.text()) 
.then(data => {
  console.log("Response:", data);
  document.getElementById("output").innerText = data;
})
.catch(error => {
  console.error("Error:", error);
});