两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
花了两天时间。
研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。
主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。
以下把代码贴出来。
供大家参考指正：
ajax.js文件（位于根目录下js子目录）
var xmlHttp;
function createXmlHttp(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
}
basic_inc.php(位于根目录下/include子目录下)
<?php
$DB_SERVER="localhost";
$DB_NAME="ajax";
$DB_USER="root";
$DB_PASSWORD="";
?>
conn.php(位于根目录下/include子目录下)
<?php
require_once("dir_inc.php");
require_once($ROOT_DIR."include/basic_inc.php");
@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());
@mysql_select_db($DB_NAME);
?>
dir_inc.php（位于根目标下/include子目录下）
<?php
$ROOT_DIR="../";
?>
select_menu.html(位于根目录下是核心前台文件)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select_menu</title>
<script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script>
<script type="text/javascript">
var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤ
var selArray;//申明一个全局数组。
用来存放级联菜单的数组
// 获取列表选项的调用函数
function buildSelect(selectedId,targetId){
if(selectedId==""){//selectedId为空表示选中了默认项clearSubsel(targetId);//清除目村列表及下级列表的选项
return;//直接结束调用，不必向服务器请求信息
}
createXmlHttp();
//将传入的目标列表的Ｉｄ赋值给ＴａｒｇｅｔＳｅｌＩｄ变量
targetSelId=targetId;//创建ＸｍｌＨｔｔｐＲｅｑｕｅｓｔ对像
//alert(targetSelId);
xmlHttp.onreadystatechange=buildSelectCallBack; //设置回调函数
xmlHttp.open("GET","select_menu.php?selectedId="+selectedId,true);
xmlHttp.send(null);
}
//获取列表选项的回调函数
function buildSelectCallBack(){
if(xmlHttp.readyState==4){
//将从服务器获得的文本转为对像直接量
// alert("("+xmlHttp.responseT ext+")");
var selectInfo=eval("("+xmlHttp.responseT ext+")");
var targetSelNode=document.getElementById(targetSelId);
clearSubSel(targetSelId);//清除列表及下级列表中的选项
//遍历对像直接量中的成员
for(var o in selectInfo){
var option1 = document.createElement("option");//创建一个Option节点option1.value=o;//节点无素的值为o option1.appendChild(document.createT extNode(selectInfo[o]));//给节点加入文本信息
targetSelNode.appendChild(option1);//把以上的节点信息创建在
targetSelNode对像上
}
}
}
//根据传入的Ｖａｌｕｅ和Ｔｅｘｔ创建选项，这个函数在这里边没有用到，直接在buildSelectCallBack函数中工作
function createOption(value,text){
var opt=document.createElement("option");
opt.setAttribute("value",value);
opt.appendChild(document.createT extNode(text));
return opt;
}
//清除传入的列表节点内所有选项
function clearOptions(selNode){
selNode.length=1;//设置列表长度为1，仅保留默认选项
selNode.options[0].selected=true;//选中默认选项
}
//清除下级子列表选项
function clearSubSel(targetId){
var canClear=false; //设置清除开关，初始化值为假
for(var i=0;i<selArray.length;i++){//遍历列表数组
//alert("targetId is:"+targetId+"|selArray-"+i+"is:"+selArray[i]);
if(selArray[i]==targetId){
canClear=true; //当遍历目标列表时，打开清除开关
}
//alert("canClear is:"+canClear);
if(canClear){//从目标列表开始到最下级列表结束，开关始终保持打开
clearOptions(document.getElementById(selArray[i]));//清除该级列表选项
}
}
}
//初始化列表数组（按等级）
function initSelArray(){
selArray=arguments;
//alert(selArray);
}
</script>
</head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="PSPad editor, ">
<title></title>
</head>
<!--页面加载完毕做两件事：1。
初始化列表数组2。
为第一个列表赋值--> <body onLoad="initSelArray('selA','selB','selC');buildSelect('INIT','selA')"> <table>
<tr>
<td>列表Ａ</td>
<td>
<select name="selA" id="selA" onChange="buildSelect(this.value,'selB')">
<option value="" selected>-----请选择------</option>
</select>
</td>
</tr>
<tr>
<td>列表Ｂ</td>
<td>
<select name="selB" id="selB" onChange="buildSelect(this.value,'selC')">
<option value="" selected>-----请选择------</option>
</select>
</td>
</tr>
<tr>
<td>列表Ｃ</td>
<td>
<select name="selC" id="selC">
<option value="" selected>-----请选择------</option> </select>
</td>
</tr>
</table>
</body>
</html>
select_menu.php（位于根目录下。
是select_menu.html文件调用的程序文件）<?php
require_once("dir_inc.php");
require_once($ROOT_DIR."include/conn.php"); $selectId=$_REQUEST['selectedId'];
if(empty($selectId)){$selectid="INIT";}
mysql_query("SET NAMES gbk`");
$sql="select * from select_menu where pid='".$selectId."'"; $result=mysql_query($sql);
$str="";
$counter=0;
$str="{";
while($rows=mysql_fetch_assoc($result)){
if($counter>0){
$str.=",";
}
$str.="'";
$str.=$rows['id'];
$str.="':'";
$str.=$rows['text'];
$str.="'";
$counter++;
}
//$strlen=strlen($str);
//$str=substr($str,0,($strlen-1));
$str.="}";
echo $str;
mysql_free_result($result);
mysql_close($db);
?>
ajax.sql（数据库文件）数据库名为阿ajax
#
# T able structure for table 'select_menu'
#
CREATE TABLE `select_menu` (
`id` varchar(255) NOT NULL default '',
`text` varchar(255) NOT NULL default '',
`pid` varchar(255) NOT NULL default '',
`seq` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPRESSED COMMENT='1.4';
#
# Dumping data for table 'select_menu'
#
INSERT INTO select_menu VALUES("A1","selectAobject1","INIT","1"); INSERT INTO select_menu VALUES("A2","selectAobject2","INIT","2"); INSERT INTO select_menu VALUES("B11","selectBobject11","A1","1"); INSERT INTO select_menu VALUES("B12","selectBobject12","A1","2"); INSERT INTO select_menu VALUES("B13","selectBobject13","A1","3"); INSERT INTO select_menu VALUES("B21","selectBobject21","A2","1"); INSERT INTO select_menu VALUES("B22","selectBobject22","A2","2"); INSERT INTO select_menu VALUES("C111","selectCobject111","B11","1"); INSERT INTO select_menu VALUES("C112","selectCobject112","B11","2"); INSERT INTO select_menu VALUES("C121","selectCobject","B12","1"); INSERT INTO select_menu VALUES("C122","selectCobject122","B12","2"); INSERT INTO select_menu VALUES("C131","selectCobject131","B13","1"); INSERT INTO select_menu VALUES("C132","selectCobject132","B13","2"); INSERT INTO select_menu VALUES("C211","selectCobject211","B21","1"); INSERT INTO select_menu VALUES("C212","selectCobject212","B21","2"); INSERT INTO select_menu VALUES("C221","selectCobject221","B22","1"); INSERT INTO select_menu VALUES("C222","selectCobject222","B22","2");。