GORAGOD.com

การเลือกข้อมูลด้วย Ajax

โค้ดตัวอย่างการร้องขอข้อมูล ด้วย Ajax โดยใช้ GAjax ในการร้องขอข้อมูลชื่อและอีเมล์จาก Server เมื่อมีการเลือกโดย Select และส่งข้อมูลไปแสดงยัง Input ทันที

    <?php
        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 ของ สมาชิก ครับ
// เริ่ม เมื่อโหลด Window เรียบร้อย
$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
<?php
    // 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"}]';
    }
?>
โค้ดของ get.php ที่ใช้ร้องขอข้อมูล สามารถนำ id ที่ส่งไปเพื่อ query ออกจากฐานข้อมูลก้ได้นะครับ

ตัวอย่าง

 

 

ปล. โค้ดนี้ใช้ GAjax นะครับ ลอง View Source โค้ดตัวอย่างดูนะครับ