GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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