การร้องขอข้อมูลจาก Server โดยการเลือก select ด้วย Ajax(ตอนที่ 1)
ตัวอย่างการใช้งาน GAJAX เพื่อร้องขอข้อมูลจาก Server โดยการเลือกรายการจาก select ซึ่งเมื่อทำการเลือกรายการข้อมูลจาก select แล้ว จะแสดงรายการที่เกี่ยวข้องซึ่งร้องขอมาจาก Server ด้วย Ajax ซึ่งจากตัวอย่างนี้ จะเป็นการร้องขอข้อมูลที่มีผลตอบกลับมากกว่า 1 รายการด้วย JSON
โค้ดหน้าหลักครับ เรียกใช้ GAJAX จาก Server (เวลาใช้งานจริงให้ดาวน์โหลด GAJAX ไปติดตั้งเอาเองนะครับ) และเป็น UTF-8 พร้อมคำสั่งต่างๆที่จำเป็นครับ
โค้ดหน้า get.php ที่ถูก Ajax เรียกไปครับ สามารถเขียน query เพื่อเลือกข้อมูลได้เหมือน PHP ปกตินะครับ ค่าที่ส่งกลับ เป็น JSON ให้สังเกตุวิธีส่งกลับกันนิดนึงนะครับ ซึ่งเป็นเทคนิคที่ผมใช้บน GCMS
โค้ดหน้าหลักครับ เรียกใช้ 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"> </span></p>
<p>Displayname : <span id="displayname"> </span></p>
<p>Sex : <img id="sex" alt=""/></p>
<p>Email : <span id="email"> </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).'"}]';
?>