ครั้งที่แล้ว ที่ผมได้สอนวิธีการใช้งานฟังก์ชั่น $.get() เรียกใช้ AJAX ให้ไปดึงข้อมูลออกจากฐานข้อมูล เอาเฉพาะแถวที่มี id=4 ผมระบุตัวเลขลงไปตรงๆ ให้ AJAX ส่งตัวแปร querystring ไปให้เซิฟเวอร์
แต่ในความเป็นจริงของการเขียนโปรแกรม ค่าที่เราส่งไปยังเซิฟเวอร์ มักเป็นค่าที่อยู่ในฟอร์ม ลองดูตัวอย่าง
$(document).ready(function(){ $('#get').click(function(){ $.get( 'get_data.php', {id:$('#id_1').val()}, function(data){ $('#container').html(data); }, 'html' ); }); }); |
ถ้าท่านไม่เข้าใจวิธีการใช้งานคำสั่ง $.get() สามารถอ่านทำความเข้าใจได้ที่ jQuery เขียน AJAX ด้วยคำสั่ง $.get()
{id:$('#id_1').val()} |
ให้ส่งตัวแปร id ไปยังเซิฟเวอร์ โดยค่าของตัวแปรคือ value ที่ป้อนอยู่ใน textbox ที่มีแอตริบิวท์ id=id_1
ทีนี้ถ้าสมมติว่า เรามีตัวแปรที่จะส่งไปยังเซิฟเวอร์ จำนวนเป็นสิบๆ ตัว เราจะมานั่งแพ็กดังในตัวอย่างด้านบน ทีละตัว คงไม่ไหว อาจจะเป็นเป็นลมเพราะไม่ได้กินข้าวทั้งวัน ในตัวอย่างด้านบน เหมาะกับการส่งตัวแปรเพียงไม่กี่ตัว
jQuery มีฟังก์ชั่นๆหนึ่ง .serialize() ใช้สำหรับแพ็กข้อมูลในฟอร์มทั้งฟอร์ม ให้เราอัตโนมัติ
สมมติ มีฟอร์มชื่อ form1 มีเท็กบ้อกอยู่ในฟอร์ม 5 ตัว (id_1-id_5) เมื่อใช้คำสั่ง
$('#form1').serialize(); |
ผลลัพธ์ที่ได้
{id_1:5,id_2:10,id_3:15,id_4:20,id_5:25} |
เมื่อนำฟังก์ชั่น .serialize() ไปใช้ร่วมกับ $.get() ทุกอย่างก็ลงตัวสวยงาม หมดจดหยดติ๋ง
$(document).ready(function(){ $('#get').click(function(){ $.get( 'get_data.php', $('#form1').serialize(), function(data){ $('#container').html(data); }, 'html' ); }); }); |
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
