การส่งคำขอ GET ผ่าน AJAX ใน JavaScript

ตอนนี้มาเรียนรู้การส่ง ข้อมูลไปยังเซิร์ฟเวอร์ในคำขอ AJAX กัน เซิร์ฟเวอร์จะทำบางอย่างกับ ข้อมูลนี้และส่งผลลัพธ์กลับมาให้เรา

เซิร์ฟเวอร์ทดสอบของเราจะประมวลผล ข้อมูลที่ส่งไปยังที่อยู่ /handler/:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/');
});

เริ่มต้นด้วยการส่งคำขอ GET กัน:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/?num=3');
});

มาเรียกดูข้อมูลที่ส่งมา ฝั่งเซิร์ฟเวอร์กัน:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // จะแสดง 3
  }
}

มาทำบางอย่างกับข้อมูลนี้ และส่งกลับไปกัน:

server.jsexport default {
  '/handler/': function({get}) {
    return get.num ** 2;
  }
}

ฝั่งไคลเอ็นต์รับผลลัพธ์ และแสดงผลที่ไหนสักแห่ง:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/handler/?num=3').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text);
    }
  );
});