การเลือกข้อมูลด้วย 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 โค้ดตัวอย่างดูนะครับ

Related

^