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

ในตอนแรก ผมได้เขียนตัวอย่างโดยการใช้ select เพียงตัวเดียว แต่ในตัวอย่างนี้ผมได้เพิ่มเติมการใช้งานฟังก์ชั่นเดียวกันกับ select หลายๆ ตัว โดยใช้ฟังก์ชั่นเดียวกัน ไปร้องขอข้อมูลจาก Server ที่ไฟล์เดียวกัน แต่ส่งกลับมาแสดงผลที่ตำแหน่งต่างกัน เหมือนกับการใช้คำสั่ง 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>

สิ่งที่น่าสนใจของโค้ดชุดนี้ก็คือ

1. มีการใช้ฟังก์ชั่นส่งค่าด้วย Ajax เพียงชุดเดียว คือ doSelected ซึ่งเมื่อทำการเลือก select จะเกิดอีเวนต์ฺมายังฟังก์ชั่นนี้เสมอ ในฟังก์ชั่นนี้ เราสามารถอ่านค่าของ select ที่กำลังทำงาน ได้จาก var sel = GEvent.element(event) ซึ่งจะคืนค่า element ที่เป็นเจ้าของ event (สามารถตรวจสอบได้โดยใช้คำสั่ง alert(sel.id))

2. ในการส่งคำสั่งไปร้องขอข้อมูล เนื่องจากเราจะใช้ไฟล์เดียวกันเพื่อร้องขอข้อมูล ดังนั้น เราจำเป็นต้องบอกให้รู้ว่า มีการเลือกมาจาก select ตัวใด ด้วยการส่ง id ของ select เจ้าของ event ไปด้วย ซึ่งเราสามารถตรวจสอบค่าที่จะส่งไปได้จาก alert(query)

3. โค้ดหน้า get.php ที่รับค่าจาก Ajax มีโค้ดเหมือนด้านล่างนี้แหละครับ จะเห็นว่าผมได้ส่งค่า id ที่ส่งมากลับไปด้วย มีเหตุผลหลักๆ 2 ข้อที่ผมส่งค่า id กลับ ทั้งๆที่ค่านี้ก็อยู่บน Server อยู่แล้ว ก็คือ หนึ่ง ค่า id ที่ส่งกลับจะเป็นตัวบอกว่า select ตัวไหนส่งค่ามา เพื่อที่ Javascript จะได้จัดการกับค่าที่รับกลับได้ถูกต้อง และ สอง ผมส่งค่ากลับจาก Server เพื่อให้แน่ใจว่า id ใดกันแน่ที่เป็นเจ้าของค่าตอบกลับที่แท้จริง เนื่องจากในบางครั้งหาก Server มีการหน่วงทำให้การส่งค่าในครั้งแรกได้ผลตอบกลับช้ากว่าครั้งที่สอง Javascript ก็ยังจัดการได้อย่างถูกต้อง

<?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).'"}]';

?>

4. ในตัวอย่างนี้ผมใช้ค่า id ที่ส่งกลับเพื่อเลือกพื้นที่ที่จะแสดงผล