วิธีการส่งฟอร์มใน JavaScript

ฟอร์มสามารถส่งได้สองวิธี: วิธี GET หรือวิธี POST วิธีการส่ง ฟอร์มถูกควบคุมโดยแอตทริบิวต์ method ของฟอร์ม

ตัวอย่างเช่น กำหนดให้ฟอร์มใช้วิธีการส่งเป็น GET:

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

และตอนนี้เป็นวิธี POST:

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ตอนนี้เรามาดูกันว่าความแตกต่างระหว่าง สองวิธีการส่งคืออะไร ในกรณีของวิธี GET ข้อมูลของฟอร์มจะปรากฏในเบราว์เซอร์ใน รูปแบบที่เรียกว่า query string (query string) ซึ่งเป็น คู่ในรูปแบบ คีย์-ค่า โดยที่คีย์ คือชื่อขององค์ประกอบฟอร์ม และค่า คือข้อมูลที่ ป้อนเข้าไป โดยคู่ของค่าจะถูกคั่นด้วยเครื่องหมาย &

ข้อมูลที่ส่งด้วยวิธี GET จะเข้าสู่ เซิร์ฟเวอร์ของเราในคุณสมบัติ get ของออบเจ็กต์ ข้อมูล:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // จะแสดงผลในคอนโซลของเซิร์ฟเวอร์
    return 'form data received';
  }
}

และข้อมูลที่ส่งด้วยวิธี POST จะเข้าสู่ เซิร์ฟเวอร์ของเราในคุณสมบัติ post ของออบเจ็กต์ ข้อมูล:

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // จะแสดงผลในคอนโซลของเซิร์ฟเวอร์
    return 'form data received';
  }
}

เพื่อความกระชับ สามารถทำการ destructuring เพื่อรับข้อมูลของเราไปไว้ในตัวแปรแยก:

server.jsexport default {
  '/handler/': function({get, post}) {
    console.log(get);
    console.log(post);
    return 'form data received';
  }
}