GORAGOD.com

การร้องขอข้อมูลจาก Server โดยการเลือก select ด้วย Ajax(ตอนที่ 1)

ตัวอย่างการใช้งาน GAJAX เพื่อร้องขอข้อมูลจาก Server โดยการเลือกรายการจาก select ซึ่งเมื่อทำการเลือกรายการข้อมูลจาก select แล้ว จะแสดงรายการที่เกี่ยวข้องซึ่งร้องขอมาจาก Server ด้วย Ajax ซึ่งจากตัวอย่างนี้ จะเป็นการร้องขอข้อมูลที่มีผลตอบกลับมากกว่า 1 รายการด้วย JSON

โค้ดหน้าหลักครับ เรียกใช้ GAJAX จาก Server (เวลาใช้งานจริงให้ดาวน์โหลด GAJAX ไปติดตั้งเอาเองนะครับ) และเป็น UTF-8 พร้อมคำสั่งต่างๆที่จำเป็นครับ
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.goragod.com/ajax/gajax.js"></script>

<!-- ตัวเลือก select -->
<select id="sel1">
<option value="1">One</option>
<option value="2">Two</option>
</select>

<!-- พื้นที่แสดงผล -->
<p>Result : <span id="result">&nbsp;</span></p>
<p>Displayname : <span id="displayname">&nbsp;</span></p>
<p>Sex : <img id="sex" alt=""/></p>
<p>Email : <span id="email">&nbsp;</span></p>

<script type="text/javascript">
// Javascript ที่ใช้
$G('sel1').addEvent('change', function(event){
    var sel = GEvent.element(event); // select ที่ส่งค่ามา
    // ajax ร้องขอข้อมูลจาก server จากค่าที่เลือกของ select
    new  GAjax().send('get.php', 'id=' + sel.value, function(xhr){
        $E('result').innerHTML = xhr.responseText; // ค่าตอบกลับ
        var datas = xhr.responseText.toJSON(); // แปลงเป็น JSON
        $E('displayname').innerHTML = datas[0].displayname;
        $E('sex').src = datas[0].sex; // img
        $E('email').innerHTML = datas[0].email;
    });
});
</script>

โค้ดหน้า get.php ที่ถูก Ajax เรียกไปครับ สามารถเขียน query เพื่อเลือกข้อมูลได้เหมือน PHP ปกตินะครับ ค่าที่ส่งกลับ เป็น JSON ให้สังเกตุวิธีส่งกลับกันนิดนึงนะครับ ซึ่งเป็นเทคนิคที่ผมใช้บน GCMS
<?php
    // ตรวจสอบข้อมูลที่มาจาก $POST[id]
    // ข้อมูลเหล่านี้เป็นเพียงตัวอย่าง
    // สามารถทำการอ่านออกมาจากฐานข้อมูลได้
    if($_POST[id] == 1){
        $ret[] = 'displayname":"admin';
        $ret[] = 'sex":"https://www.goragod.com/skin/img/f.gif';
        $ret[] = 'email":"admin@goragod.com';
    }else{
        $ret[] = 'displayname":"กรกฎ';
        $ret[] = 'sex":"https://www.goragod.com/skin/img/m.gif';
        $ret[] = 'email":"no-reply@goragod.com';
    };
    // ส่งค่ากลับเป็น JSON
    echo '[{"'.implode('","', $ret).'"}]';
?>