Warning: file_get_contents(/home/gcms/public_html/skin/datas/users/goro/skin/2017/amp.css): failed to open stream: No such file or directory in /home/gcms/public_html/Gcms/Amp.php on line 32
GAJAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX)

GORAGOD

GAJAX บทที่ 22 XML (ตำบล อำเภอ จังหวัด ด้วย GAJAX)

นอกจาก GAJAX จะทำงานกับข้อความ ได้แล้ว มันยังรองรับการใช้งาน XML เหมือน AJAX ทั่วไปได้ด้วย ในบทนี้คุณจะได้เห็นตัวอย่างการใช้งาน GAJAX กับ XML และยังได้เรียนรู้การใช้งาน Combobox 3 ระดับ ด้วยโค้ด ตำบล อำภอ จังหวัด อีกด้วย

ถ้าคุณดูในโค้ด (index.php) จะเห็นได้ว่า GAJAX ได้ช่วยให้การออกแบบแยกส่วนออกจากกันได้อย่างชัดเจน

ส่วนแรก ผมใช้สำหรับรับค่าที่ได้มาจากการ submit แต่ก็สามารถใช้ในการกำหนดค่าเริ่มต้นให้กับ select แต่ละตัวได้เช่นกัน โดยการกำหนดค่าที่ต้องการลงในตัวแปรแต่ละตัว

อ้อ ค่านี้จะเป็น id ของ จังหวัด อำเภอ และ ตำบลเท่านั้นนะครับ เนื่องจากเราอาจพบชื่อซ้ำกันได้ในบางตำบล หรืออำเภอ จึงไม่สามารถใช้ชื่อจังหวัดจริงได้
<?php
    // ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
    // หรือค่าที่อ่านได้จากฐานข้อมูล สำหรับแสดงเมื่อโหลดหน้าเพจครั้งแรก
    $city = $_GET[city];
    $amphur = $_GET[amphur];
    $tumbon = $_GET[tumbon];
?>

โค้ดส่วนที่ 2 เป็นฟอร์ม HTML และ select 3 ตัวคือ city amphur และ tumbon (แปลกันเอาเอง) จะเห็นได้ว่าไม่ได้มีการกำหนดอะไรที่ยุ่งยากเลย
<p><select id="city" name="city"><option value="<?php echo $city?>">--เลือกจังหวัด--</option></select></p>
<p><select id="amphur" name="amphur"><option value="<?php echo $amphur?>">--เลือกอำเภอ--</option></select></p>
<p><select id="tumbon" name="tumbon"><option value="<?php echo $tumbon?>">--เลือกตำบล--</option></select></p>
<p><input type="submit" /></p>
</form>

โค้ดส่วนที่ 3 เป็นส่วนของ Javascript ซี่งใช้ GAJAX ในการจัดการทั้งหมด ตั้งแต่การจัดการกับ Event และ การจัดการกับ XML
<script type="text/javascript">
/* ฟังก์ชั่นนี้จะถูกเรียกเมื่อมีการเลือกรายการใน select ทุกตัว */
var doPrivonce = function(event) {
    var city =  $E('city');
    var amphur =  $E('amphur');
    var tumbon =  $E('tumbon');
    var src = GEvent.element(event); /* element ที่เป็นเจ้าของ event */
    if (!Object.isNull(src) && src.id == 'city') {
        /* event เมื่อเลือก จังหวัด */
        var query = 'city=' + city.value;
    } else if (!Object.isNull(src) && src.id == 'amphur') {
        /* event เมื่อเลือก อำเภอ */
        var query = 'city=' + city.value + '&amphur=' + amphur.value;
    } else {
        var query = 'city=' + city.value + '&amphur=' + amphur.value + '&tumbon=' + tumbon.value;
    };
    /* Ajax ส่งไปโหลด อำเภอและจังหวัด */
    var req = new GAjax();
    req.send('province.php' , query , function(xhr){
        /* รับค่ากลับมาในส่วนนี้ เป็น XML */
        /* <province> (root) */
        var provinceNode = xhr.responseXML.getElementsByTagName('province')[0];
        /* <city> */
        var cityNode = provinceNode.getElementsByTagName('city')[0];
        var items = cityNode.getElementsByTagName('*');
        populate(city, items, city.value);
        /* <amphur> */
        var amphurNode = provinceNode.getElementsByTagName('amphur')[0];
        var items = amphurNode.getElementsByTagName('*');
        populate(amphur, items, amphur.value);
        /* <tumbon> */
        var tumbonNode = provinceNode.getElementsByTagName('tumbon')[0];
        var items = tumbonNode.getElementsByTagName('*');
        populate(tumbon, items, tumbon.value);
    });
};

/* ฟังก์ชั่นสำหรับจัดการรายการต่างๆ (option) ใน select */
function populate(obj , items, select) {
    /* เคลียร์ข้อมูลเก่า เหลือไว้แค่รายการแรก*/
    for (var i = obj.options.length - 1 ; i > 0 ; i--) {
        obj.removeChild(obj.options[i]);
    };
    var selectedIndex = 0;
    /* เพิ่มรายการใหม่ */
    for (var i = 0 ; i < items.length ; i++) {
        var key = items[i].tagName.replace('a', '');
        selectedIndex = key == select ? i + 1 : selectedIndex;
        var option = document.createElement('option');
        option.innerHTML = items[i].firstChild.data;
        option.value = key;
        obj.appendChild(option);
    };
    /* เลือกรายการที่ต้องการ */
    obj.selectedIndex = selectedIndex;
    /* เคลียร์ค่าในรายการแรกที่ใส่ไว้ */
    obj.options[0].value = '';
};

/* เริ่มต้นทำงานครั้งแรกเมื่อโหลดหน้าเพจเสร้จ */
$G(document).Ready(function(){
    /* กำหนด event ให้กับ select แต่ละตัว */
    $G('city').addEvent('change',doPrivonce);
    $G('amphur').addEvent('change',doPrivonce);
    /* โหลดเพจครั้งแรก */
    doPrivonce(this);
});
</script>

สำหรับการจัดการกับ XML ก็เป็นการใช้ฟังก์ชั่นทั่วไปของ Javascript ในการสร้าง option แต่ละตัว แล้วใส่ให้กับ select ตามรายชื่อที่ได้รับ
<?php
    header("content-type: text/xml; charset=UTF-8");
    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
";
    echo "<province>";
    // ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
    $city = $_POST[city];
    $amphur = $_POST[amphur];

    // ติดต่อฐานข้อมูล
    $hostname_conn = "localhost";
    $username_conn = "root";
    $password_conn = "";
    $database_conn = "province";
    mysql_connect($hostname_conn, $username_conn, $password_conn);
    mysql_query("SET NAMES utf8");
    mysql_select_db($database_conn); // เลือกฐานข้อมูล

    echo "<city>";
    $sql = "SELECT id, name FROM province";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</city>";
    echo "<amphur>";
    $sql = "SELECT id, name FROM amphur WHERE provinceID='$city'";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</amphur>";
    echo "<tumbon>";
    $sql = "SELECT id, name FROM tumbon WHERE amphurID='$amphur'";
    $result = mysql_query($sql);
    while ($fetcharr = mysql_fetch_array($result)) {
        echo "<a$fetcharr[id]>$fetcharr[name]</a$fetcharr[id]>";
    }
    echo "</tumbon>";
    echo "</province>";
    mysql_close();
?>

สำหรับในส่วน province.php ซึ่งเป็นหน้าที่รับค่าจาก AJAX ก็มีการ query ออกมาจากฐานข้อมูล และคืนค่าเป็นรุปแบบ XML เท่านั้นครับ ซึ่งในการจัดการแสดงผลจะเป็นหน้าที่ของ Javascript ในหน้า index.php
 สำหรับฐานข้อมูล เป็นฐานข้อมูลเดียวกันกับในXML
 (719)