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

<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="sel-1">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="sel-2">
<option value="3">Three</option>
<option value="4">Four</option>
</select>

<!-- พื้นที่แสดงผล -->
<p>Result : <span id="result">&nbsp;</span></p>
<p>Value 1 : <span id="value1">&nbsp;</span></p>
<p>Value 2 : <span id="value2">&nbsp;</span></p>

<script type="text/javascript">
var doSelected = function(event){
    var sel = GEvent.element(event); // select ที่ส่งค่ามา
    //alert(sel.id); // สำหรับดูว่า select ตัวใดส่งค่ามา (debug)
    // ajax ร้องขอข้อมูลจาก server จากค่าที่เลือกของ select
    var query = 'id=' + sel.id + '&value=' + sel.value;
    //alert(query); // ดู query (debug)
    new  GAjax().send('get.php', query, function(xhr){
        $E('result').innerHTML = xhr.responseText; // ค่าตอบกลับ
        var datas = xhr.responseText.toJSON(); // แปลงเป็น JSON
        $E('value' + datas[0].id).innerHTML = datas[0].value;
    });
};
// select 2 ตัวโดยใช้ฟังก์ชั่นเดียวกัน
$G('sel-1').addEvent('change', doSelected);
$G('sel-2').addEvent('change', doSelected);
</script>

<?php
    // ค่าที่ส่งมา
    $id = $_POST[id];
    $value = $_POST[value];
    // ค่าที่ส่งกลับ
    // สามารถเขียนคำสั่งเพื่ออ่านข้อมูลที่ต้องการได้
    // โดยการเลือกจาก id และ value ที่ส่งมา
    list($v, $i) = explode('-', $id); // แยก id ออก (sel-1)
    $ret[] = 'id":"'.$i;
    $ret[] = 'value":"'.$value;
    // ส่งค่ากลับเป็น JSON
    echo '[{"'.implode('","', $ret).'"}]';
?>