แสดงข้อมูลจาก MySQL ลงใน Drop-Down List ด้วย PHP+AJAX

    สำหรับวิดีโอในบทความนี้ จะเป็นการเขียนโปรแกรม PHP เพื่อดึงข้อมูลสถานที่ท่องเที่ยวต่างๆจากฐานข้อมูล MySQL มาแสดงใน drop-down list ตามรายชื่ออำเภอที่เลือก โดยการรับส่งข้อมูลผ่าน AJAX ด้วย jQuery จาวาสคริปต์เฟรมเวิร์ก ซึ่งจะใช้ข้อมูลรูปแบบ JSON สร้างเป็นอาร์เรย์ในจาวาสคิปต์

จากนั้นก็นำข้อมูลอาร์เรย์ที่ได้ไปสร้าง <option> ด้วยฟังก์ชั่น parseHtml() ที่สร้างขึ้นมาเพื่อรับข้อมูลแบบอาร์เรย์โดยเฉพาะ สำหรับเทมเพลต html หรือตัว <option> นั้นจะสร้างด้วยหลักการเดียวกันกับ View ของ CodeIgniter Framework

{list}
    <option value="{district_id}">{district_name}</option>
{/list}

ซอร์สโค๊ดในตัวอย่าง

 pages/option_list.php

<h2>เปลี่ยนข้อมูล drop-down list ด้วยการรับส่งข้อมูลแบบ Ajax</h2>
<table border="0">
    <tr>
        <th>อำเภอ</th>
        <th>สถานที่ท่องเที่ยว</th>
    </tr>
    <tr>
        <td>
            <select name="district" id="district" onchange="loadTravelPlace(this.value)">
                <option value="">-- เลือกอำเภอ --</option>
            </select>
        </td>
        <td>
            <select name="travel_place" id="travel_place">
                <option value="">-- สถานที่ท่องเที่ยว --</option>
            </select>
        </td>
    </tr>
</table>
<script type='text/javascript'>
    /* URL */
    var ajaxURL = 'ajax_service.php?source=option_list';

    /* Load Templates */
    var tplDistrict = '{list}<option value="{district_id}">{district_name}</option>{/list}';
    var tplTravelPlace = '{list}<option value="{place_id}">{place_name}</option>{/list}';
  
    /*-------- loadData ----------*/
    function loadDistrict(){
        $.ajax({
            dataType: "json",
            url: ajaxURL,
            data: 'action=load_district',
            success: function(return_data){
                $('#district').html(parseHtml(tplDistrict, return_data));
            }
        });
    }
    function loadTravelPlace(pDstId){
        $.ajax({
            dataType: "json",
            url: ajaxURL,
            data: 'action=load_place&dst_id=' + pDstId,
            success: function(return_data){
                $('#travel_place').html(parseHtml(tplTravelPlace, return_data));
            }
        });
    }
  
    loadDistrict();
  
</script>

 ajax_service/option_list_ajax.php

<?php
include_once('classes/connection.php');

function loadDistrict(){
    $db = new dbConnect();
  
    $data = array();
    $sql = "SELECT dst_id AS district_id, dst_name AS district_name FROM `tb_district` ";  //-- ข้อมูลสาขาทั้งหมด
    $qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
    while($row = mysql_fetch_assoc($qry)){
        $data[] = $row;
    }
    $json = array(
                'list' => $data
            );
    echo json_encode($json);
}

function loadPlace(){
    $db = new dbConnect();
    $dstId = $_GET['dst_id'];
    $data = array();
    $sql = "SELECT tvp_id AS place_id, tvp_name AS place_name FROM `tb_travel_place` WHERE `tvp_dst_id` = $dstId";  //-- ข้อมูลสาขาทั้งหมด
    $qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
    while($row = mysql_fetch_assoc($qry)){
        $data[] = $row;
    }
    $json = array(
                'list' => $data
            );
    echo json_encode($json);
}

//***** Call Function *****//
$action = isset($_POST['action']) ? $_POST['action'] : '';
if($action == '') $action = isset($_GET['action']) ? $_GET['action'] : '';
switch( $action ){
    case 'load_district':
        loadDistrict();
        break;  
    case 'load_place':
        loadPlace();
        break;
}
//-- END Call Function

?>

 ดาวน์โหลดซอร์สโค๊ดทั้งหมดที่หน้านี้ >>


โครงสร้างฐานข้อมูลที่ใช้ทดสอบ

--
-- Table structure for table `tb_district`
--

CREATE TABLE IF NOT EXISTS `tb_district` (
  `dst_id` int(11) NOT NULL AUTO_INCREMENT,
  `dst_name` varchar(20) NOT NULL,
  PRIMARY KEY (`dst_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

--
-- Dumping data for table `tb_district`
--

INSERT INTO `tb_district` (`dst_id`, `dst_name`) VALUES
(1, 'เมือง'),
(2, 'เชียงของ'),
(3, 'เชียงแสน'),
(4, 'เทิง'),
(5, 'แม่จัน'),
(6, 'แม่ฟ้าหลวง'),
(7, 'แม่ลาว'),
(8, 'แม่สาย'),
(9, 'แม่สรวย');

-- --------------------------------------------------------

--
-- Table structure for table `tb_travel_place`
--

CREATE TABLE IF NOT EXISTS `tb_travel_place` (
  `tvp_id` int(11) NOT NULL AUTO_INCREMENT,
  `tvp_name` varchar(30) NOT NULL,
  `tvp_dst_id` int(5) NOT NULL,
  PRIMARY KEY (`tvp_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=29 ;

--
-- Dumping data for table `tb_travel_place`
--

INSERT INTO `tb_travel_place` (`tvp_id`, `tvp_name`, `tvp_dst_id`) VALUES
(1, 'วัดพระแก้ว ', 1),
(2, 'วัดพระสิงห์ ', 1),
(3, 'วัดร่องขุ่น ', 1),
(4, 'น้ำตกขุนกรณ์ ', 1),
(5, 'น้ำตกโป่งพระบาท', 1),
(6, 'ท่าเรือบั๊ก', 2),
(7, 'วนอุทยานห้วยทรายมาน', 2),
(8, 'วัดพระธาตุจอมกิตติ ', 3),
(9, 'วัดพระธาตุผาเงา ', 3),
(10, 'หอฝิ่น อุทยานสามเหลี่ยมทองคำ ', 3),
(11, 'ภูชี้ฟ้า ', 4),
(12, 'ภูผาสวรรค์ ', 4),
(13, 'ภูชมดาว หรือ ผาหม่นน้อย ', 4),
(14, 'วัดพระธาตุจอมจันทร์ ', 5),
(15, 'ลานทองอุทยานวัฒนธรรมลุ่มแม่น้ำ', 5),
(16, 'ทุ่งดอกบัวตอง บนดอยหัวแม่คำ ', 6),
(17, 'ดอยแม่สลอง ', 6),
(18, 'พระตำหนักดอยตุง ', 6),
(19, 'ไร่ชาฉุยฟง ', 6),
(20, 'สถานีเพาะเลี้ยงสัตว์ป่าแม่ลาว ', 7),
(21, 'วัดพระธาตุดอยเวา ', 8),
(22, 'ถ้ำปุ่ม-ถ้ำปลา ', 8),
(23, 'ตลาดแม่สาย-ท่าขี้เหล็ก ', 8),
(24, 'วัดถ้ำผาจม ', 8),
(25, 'ดอยวาวี', 9),
(26, 'ดอยช้าง', 9),
(27, 'ดอยกาดผี ', 9),
(28, 'วัดแสงแก้วโพธิญาญ ', 9);

นำโค๊ด SQL ด้านบนนี้ไปรันใน phpMyAdmin เพื่อเตรียมฐานข้อมูลสำหรับเริ่มเขียน PHP ตามตัวอย่างกันได้เลยนะครับ

PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 4,500 บาท
http://fastcoding.phpcodemania.com/





       "PHP ไม่ได้สร้างสุดยอดโปรแกรม 
                 แต่ PHP ช่วยให้งานคุณง่ายขึ้นต่างหาก"



PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 3,990 บาท
http://fastcoding.phpcodemania.com/




PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้มเพียง 3,990 บาท 
http://www.phpcodemania.com