两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
花了两天时间。研究AJAX,终于独立完成一个无限组的多级菜单联动功能。主要特点:就是HTML静态页面可以无刷新的与PHP动态角本文件及数据库交互(这也是AJAX的核心目的)。
以下把代码贴出来。供大家参考指正:
ajax.js文件(位于根目录下js子目录)
var xmlHttp;
function createXmlHttp(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
}
basic_inc.php(位于根目录下/include子目录下)
$DB_SERVER="localhost";
$DB_NAME="ajax";
$DB_USER="root";
$DB_PASSWORD="";
?>
conn.php(位于根目录下/include子目录下)
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子目录下)
$ROOT_DIR="../";
?>
select_menu.html(位于根目录下是核心前台文件)
var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ID
var selArray;//申明一个全局数组。用来存放级联菜单的数组
// 获取列表选项的调用函数
function buildSelect(selectedId,targetId){
if(selectedId==""){//selectedId为空表示选中了默认项clearSubsel(targetId);//清除目村列表及下级列表的选项
return;//直接结束调用,不必向服务器请求信息
}
createXmlHttp();
//将传入的目标列表的Id赋值给TargetSelId变量
targetSelId=targetId;//创建XmlHttpRequest对像
//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对像上
}
}
}
//根据传入的Value和Text创建选项,这个函数在这里边没有用到,直接在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 //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); }