jQuery การประยุกต์ใช้คำสั่ง .serialize()

ครั้งที่แล้ว ที่ผมได้สอนวิธีการใช้งานฟังก์ชั่น $.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'
		);
 
	});
});

บทความน่าสนใจ

3 Comments

jodmod

Posted 13/06/2011 at 21:16 | Permalink

ชัดเจนครับ ขอบคุณครับสำหรับความรู้

Log in to reply.
บัณฑิต

Posted 15/06/2011 at 13:27 | Permalink

แล้วทำไม jQuery ถึงส่ง serialize แบบ $_FILES ไม่ได้หล่ะครับ ทำทีไรไม่ได้สักที พอจะมีตัวอย่างแนะนำไหมครับ โดยที่ไม่ต้องไปหา Plugin มาเพิ่มเติมเพราะผมคิดว่า แบบนี้น่าจะใช้งานได้แต่ก็ไม่ได้ ขอบพระคุณมาก ๆ ครับ

Log in to reply.
- administrator
  
  Posted 15/06/2011 at 20:24 | Permalink
  ถ้าสังเกตุนิดนึงจะเห็นว่า เวลาที่ในฟอร์มของเรามีกล่องให้อัปโหลดไฟล์ ตัวฟอร์มจะพิเศษ
  <form name="form1" enctype="multipart/form-data" method="post">
  enctype="multipart/form-data"
  การส่งแบบนี้มันจะส่งข้อมูลไปแบบไบนารี AJAX ธรรมดาๆมันไม่ซัพพอร์ต ปลักอินที่เขาทำแจกๆกันที่มองว่าเป็น AJAX น่ะ เขาเอา FLASH เข้ามาช่วยอีกทีนึง ไม่เชื่อลองสังเกตดู
  
  ผมแนะนำว่าให้ใช้ปลักอินครับผม บางตัวเขียนไว้สุดยอดแล้ว แค่ศึกษาวิธีใช้
  Log in to reply.