การส่งฟอร์มใน JavaScript

คุณได้เรียนรู้วิธีการทำงานกับองค์ประกอบฟอร์ม ใน JavaScript แล้ว โดยการประมวลผลพวกมันในเบราว์เซอร์ อย่างไรก็ตาม ฟอร์มยังสามารถถูกส่งไปยัง เซิร์ฟเวอร์ได้ เพื่อให้ส่วนของเซิร์ฟเวอร์ของเว็บไซต์ ซึ่งเขียนด้วย PHP หรือ NodeJS ทำการประมวลผล

สิ่งนี้จำเป็นเพื่อที่จะเพิ่มและเปลี่ยนแปลง ข้อมูลของเว็บไซต์ที่เก็บอยู่บนเซิร์ฟเวอร์

มาดูกันว่ามันทำอย่างไร สมมติว่า เรามีอินพุตหลายๆ อันและปุ่ม:

html<input>
<input>
<input type="submit">

ให้เราใส่องค์ประกอบของเราไว้ในแท็ก form ในกรณีนี้ เราจะได้ฟอร์มซึ่ง เมื่อกดปุ่มจะถูกส่งไปยังเซิร์ฟเวอร์:

html<form>
  <input>
  <input>
  <input type="submit">
</form>

เพื่อที่บนเซิร์ฟเวอร์จะสามารถรับข้อมูล ของฟอร์มได้ จำเป็นต้องกำหนดชื่อให้แต่ละอินพุต:

html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ในกรณีนี้ ข้อมูลฟอร์มจะไปถึงเซิร์ฟเวอร์ ในรูปแบบ คีย์-ค่า โดยที่คีย์คือ ชื่อขององค์ประกอบฟอร์ม และค่าคือข้อมูล ที่ป้อนเข้าไป

สำหรับการส่งฟอร์ม ไม่จำเป็นต้องมี เซิร์ฟเวอร์ คุณสามารถคัดลอกรหัสฟอร์ม ที่ให้มาไปไว้ในไฟล์ใดก็ได้ เปิดมันในเบราว์เซอร์ และกดปุ่มส่ง - ฟอร์มจะถูกส่ง และหน้าเบราว์เซอร์จะรีเฟรช

อย่างไรก็ตาม หากไม่มีเซิร์ฟเวอร์ ข้อมูลฟอร์ม จะไปไม่ถึงไหน ดังนั้น เรามาลองทดสอบการทำงานของฟอร์มร่วมกับเซิร์ฟเวอร์กัน ในขณะนี้คุณยังไม่รู้ภาษาสำหรับเซิร์ฟเวอร์ใดๆ ดังนั้น เรามาลองฝึกส่งฟอร์มด้วย HTTP เซิร์ฟเวอร์เพื่อการเรียนรู้ของเรา กัน

ให้เราใส่ฟอร์มของเราไว้ในไฟล์บางไฟล์ เพื่อให้สามารถเข้าถึงได้ที่ URL http://localhost:3001/form.html:

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

ให้เราเพิ่มแอตทริบิวต์ action ให้กับฟอร์มของเรา ซึ่งระบุ URL ปลายทางการส่งฟอร์มของเรา:

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

ตอนนี้ในไฟล์ server.js ให้เราเขียน handler สำหรับ URL ปลายทางการส่งฟอร์ม:

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

ข้อมูลฟอร์มที่ถูกส่งจะเข้ามาในพารามิเตอร์ของ handler ของเรา:

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