การทำ List/Menu ด้วย Ajax จัดทำโดย : first
 Untitled Document

การทำ List/Menu ด้วย Ajax

1.สร้างฐานข้อมูล


CREATE DATABASE `listmenu` ;

2.สร้างตารางเก็บข้อมูล

CREATE TABLE `tb_catalog` ( `cat_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`cat_name` tinytext NOT NULL ,
PRIMARY KEY ( `cat_id` ) ) ENGINE = MYISAM DEFAULT CHARSET = tis620 AUTO_INCREMENT =7;# MySQL คืนผลลัพธ์ว่างเปล่ากลับมา (null / 0 แถว).
--
-- dump ตาราง `tb_catalog`
--
INSERT INTO `tb_catalog` ( `cat_id` , `cat_name` )
VALUES ( 1, 'RING' ) , ( 2, 'PENDANT&BROOCH' ) , ( 3, 'EARRING' ) , ( 4, 'BRACELET' ) , ( 5, 'BANGLE' ) , ( 6, 'NECKLACE' ) ;# แถวที่มีผล:6
-- --------------------------------------------------------
--
-- โครงสร้างตาราง `tb_subcatalog`
--
CREATE TABLE `tb_subcatalog` ( `sub_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`cat_id` int( 11 ) NOT NULL default '0',
`sub_name` tinytext NOT NULL ,
`sub_date` tinytext NOT NULL ,
PRIMARY KEY ( `sub_id` ) ) ENGINE = MYISAM DEFAULT CHARSET = tis620 AUTO_INCREMENT =52;# MySQL คืนผลลัพธ์ว่างเปล่ากลับมา (null / 0 แถว).
--
-- dump ตาราง `tb_subcatalog`
--
INSERT INTO `tb_subcatalog` ( `sub_id` , `cat_id` , `sub_name` , `sub_date` )
VALUES ( 1, 1, 'PLAIN RING', '1201599849' ) , ( 2, 1, 'CZ RING', '1201596870' ) , ( 3, 1, 'PAVE RING', '1201597820' ) , ( 4, 2, 'PLAIN PENDANT', '1201596895' ) , ( 5, 2, 'CZ PENDANT', '1201596906' ) , ( 6, 2, 'PAVE PENDANT', '1201596915' ) , ( 7, 3, 'PLAIN EARRING', '1201599709' ) , ( 8, 3, 'CZ EARRING', '1201596936' ) , ( 9, 3, 'PAVE EARRING', '1201596945' ) , ( 10, 4, 'PLAIN BRACELET', '1201596963' ) , ( 11, 4, 'CZ BRACELET', '1201596979' ) , ( 19, 1, 'MARCASITE RING', '1201673452' ) , ( 20, 1, 'SEMIPRECIOUS RING', '1201673469' ) , ( 22, 2, 'MARCASITE PENDANT', '1201673604' ) , ( 21, 1, 'OTHER RING', '1201673483' ) , ( 23, 2, 'SEMIPRECIOUS PENDANT', '1201673622' ) , ( 24, 3, 'MARCASITE EARRING', '1201674153' ) , ( 25, 3, 'SEMIPRECIOUS EARRING', '1201674165' ) , ( 26, 4, 'PAVE BRACELET ', '1201674189' ) , ( 27, 4, 'MARCASITE BRACELET ', '1201674205' ) , ( 28, 4, 'SEMIPRECIOUS BRACELET', '1201674220' ) , ( 29, 5, 'PLAIN BANGLE', '1201674247' ) , ( 30, 5, 'CZ BANGLE', '1201674253' ) , ( 31, 5, 'PAVE BANGLE', '1201674260' ) , ( 32, 5, 'MARCASITE BANGLE', '1201674270' ) , ( 33, 5, 'SEMIPRECIOUS BANGLE', '1201674282' ) , ( 34, 6, 'PLAIN NECKLACE', '1201674302' ) , ( 35, 6, 'CZ NECKLACE', '1201674383' ) , ( 36, 6, 'PAVE NECKLACE', '1201674390' ) , ( 37, 6, 'MARCASITE NECKLACE', '1201674416' ) , ( 38, 6, 'SEMIPRECIOUS NECKLACE', '1201674428' ) , ( 39, 5, 'OTHER BANGLE', '1201674458' ) , ( 40, 6, 'OTHER NECKLACE', '1201674470' ) , ( 41, 3, 'OTHER EARRING', '1201674490' ) , ( 42, 2, 'OTHER PENDANT', '1201674517' ) , ( 43, 4, 'OTHER BRACELET', '1201674535' ) , ( 44, 1, 'SINGLE STONE RING', '1201674567' ) , ( 46, 1, 'mam r', '1202203757' ) , ( 47, 2, 'mam p', '1202203750' ) , ( 48, 3, 'mam e', '1202203742' ) , ( 49, 4, 'mam br', '1202203735' ) , ( 50, 5, 'mam b', '1202203726' ) , ( 51, 6, 'mam n', '1202203712' ) ;#


3.สร้างไฟล์ menu.php โดยนำโค้ดนี้ไว้ใน Head

<script>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function list_namesub(id) {
var obj = document.getElementById("subcatalog");
var obj_default = '- Choose -';
if(id ==""){
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');}else{
var url = "get_subname.php?id=" + id;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var results = xmlHttp.responseText;
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
arr_list=results.split("/");
if(arr_list.length-1!=0){
for (var i=0; i < eval(arr_list.length-1); i++) {
shop_arr=arr_list[i].split(",");
obj.options[i] = new Option(shop_arr[0],shop_arr[1]);
}}else{
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');
}
}
}}
}}
</script>


4.นำโค้ดนี้ไว้ใน Body
<form id="form1" name="form1" method="post" action="">
<select name="catalog" id="catalog" onChange="list_namesub(this.value);" style="width:200px">
<option value="">- Choose -</option>
<?
$host="localhost"; //ชื่อ Host
$user="root"; //ชื่อ user
$password=""; //รหัสผ่านฐานข้อมูล
$dbname="listmenu";
$connection=mysql_connect($host,$user,$password) or die("เชื่อมต่อฐานข้อมูลไม่ได้");
mysql_select_db($dbname) or die("ไม่สามารถเลือกฐานข้อมูลได้");
$sql="select * from tb_catalog order by cat_id ASC";
$dbquery=mysql_db_query($dbname,$sql);
while($result=mysql_fetch_array($dbquery)){
?>
<option value="<?=$result[cat_id];?>"><?=$result[cat_name];?></option>
<?
}
?>
</select>
<br />
<br />
<select name="subcatalog" id="subcatalog" style="width:200px">
<option value="">- Choose -</option>
</select>
</form>


5.หลังจากนั้นให้สร้างไฟล์ get_subname.php ดังนี้

<?php
header("Content-Type: text/plain; charset=TIS-620");
$host="localhost";
$user="root";
$password="";
$dbname="listmenu";
$connection=mysql_connect($host,$user,$password) or die("เชื่อมต่อฐานข้อมูลไม่ได้");
mysql_select_db($dbname) or die("ไม่สามารถเลือกฐานข้อมูลได้");
$sql="select * from tb_subcatalog where cat_id = '$id' ";
$dbquery = mysql_db_query($dbname, $sql);
echo "- Choose -, /";
while ($result = mysql_fetch_array($dbquery)){
echo"$result[sub_name],$result[sub_id]/";
}
mysql_close();
?>

อธิบาย
1. onChange="list_namesub(this.value);"
เมื่อเราเลือก Listmenu Catalog และจะนำค่า id catalog ไปให้ Function list_namwsub
2.
var url = "get_subname.php?id=" + id; ก็จะส่งค่า id catalog ไปที่ไฟล์ get_subname.php เพื่อค้นหา subcatalog ของ catalog แล้วนำมาแสดงที่ var obj = document.getElementById("subcatalog"); subcatalog คือชื่อ Listmenu ของ subcatalog

6.มาดูผลกัน
ตอนที่เรายังไม่ได้เลือก Catalog (ด้านบน) กันนะครับ จะเห็นว่า Listmenu subcatalog ด้านล่างไม่มีค่าอะไรเลยนะครับ




ทีนี่มาดูตอนที่เราเลือก Catalog ไปที่ Ring ดูนะครับ จะเห็นว่ามีเมนู ออกมาโดยไม่ต้อง Refresh หน้านี้ใหม่นะครับ


คุณอาจสนใจ
เพิ่มปุ่ม Flash ให้กับ Dreamweaver MX
Mr.GuruZ (48,611 - 04 มิ.ย. 49)
วิธีการติดตั้งวินโดส์เอ็กพี โดยใช้ฮาร์ดิสก์ SATA
เว็บไทยดีดี (16,514 - 29 ก.ย. 50)
การทำระบบ Login โดยใช้ฐานข้อมูล
Mr.GuruZ (260,380 - 03 มิ.ย. 49)
ชนิดข้อมูลของตัวแปร
Mr.POP (63,826 - 05 พ.ย. 49)
การใส่ link ใน flash
Charoen (151,163 - 28 พ.ย. 50)
SmarThumb ซอฟต์แวร์สำหรับ Flash Drive USB ตัวแรกของโลก
เว็บไทยดีดี (17,855 - 18 ส.ค. 50)
วิธีการใส่พื้นหลังให้ MSN
เว็บไทยดีดี (17,249 - 25 ส.ค. 50)
Rectangular Marquee (M)
Mr.GuruZ (81,393 - 22 ก.ย. 50)