การร้องขอข้อมูลจาก 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).'"}]';

?>