การเลือกข้อมูลด้วย Ajax
โค้ดตัวอย่างการร้องขอข้อมูล ด้วย Ajax โดยใช้ GAjax ในการร้องขอข้อมูลชื่อและอีเมล์จาก Server เมื่อมีการเลือกโดย Select และส่งข้อมูลไปแสดงยัง Input ทันที
if(isset($_POST)) {
print_r($_POST);
}
?>
<form method=post action=test.php>
<p>
<input type=text id=name name=username>
<input type=text id=email name=email>
</p>
<p>
<select id=username name=userid>
<option value=0>กรุณาเลือก</option>
<option value=1>Guest</option>
<option value=2>Admin</option>
</select>
</p>
<p>
<input type=submit>
</p>
</form>
โค้ด HTML ด้านบน ตัว select สามารถ query จากฐานข้อมูลก้ได้นะครับ โดยที่ ค่าของ option แต่ละตัว คือ id ของ สมาชิก ครับ
$G(window).Ready(function(){
// เมื่อมีการเลือก select
$G('username').addEvent('change', function(){
// ไม่ใช่ 0
if (this.value != 0) {
// ส่งค่าจาก select ไป query ข้อมูล
var req = new GAjax();
req.send('get.php', 'id=' + this.value, function(xhr){
// แปลงข้อมูลเป็น JSON
var ds = xhr.responseText.toJSON();
// แสดงผลข้อมูลที่รับมา
$E('name').value = ds[0].name;
$E('email').value = ds[0].email;
});
} else {
// clear
$E('name').value = '';
$E('email').value = '';
}
});
});
โค้ด Javascript ที่ใช้ครับ ไม่มีอะไรมาก แค่ดักจับ event changed ของ select เมื่อมีการเลือกรายการที่มากกว่า 0 ให้ส่ง query ไปร้องขอข้อมูลจาก get.php วึ่งส่งค่ากลับในรูป JSON และเอาข้อมูลที่ส่งกลับมาใส่ใน Input
// UTF-8
header("content-type: text/html; charset=UTF-8");
// ค่า id mี่ส่งมาจาก select สามารถนำไปใช้ query ข้อมูลได้
$id = intval($_POST['id']);
// ค่าที่ส่งคืน เป็น JSON
if ($id == 1) {
echo '[{"name":"Guest","email":"guest@admin.com"}]';
} elseif ($id == 2) {
echo '[{"name":"Admin","email":"admin@admin.com"}]';
}
?>
ตัวอย่าง
ปล. โค้ดนี้ใช้ GAjax นะครับ ลอง View Source โค้ดตัวอย่างดูนะครับ