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

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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