Ajax php无限联动下拉菜单实例

Ajax无限联动实现方法就是先由用户选择大类，然后我们再用ajax实现数据局部请求给php页面处理，php把用户需要的数据返回到html js进行处理，这样就实现了无限联动下拉菜单的效果了。

首先是 Ajax.php文件：

这个文件我觉着就是接收数据处理数据的

 代码如下

复制代码

代码如下	复制代码
mysql_connect("localhost","root",""); mysql_select_db("aaa"); mysql_query("set names 'UTF8'");

mysql_connect("localhost","root","");
mysql_select_db("aaa");
mysql_query("set names 'UTF8'");

上面的这些代码 不用我说都知道是连接数据库的

代码如下	复制代码
//select 语句 1.//$q=mysql_query("select * from `newstype` where `kid`='".$_POST['id']."'"); 2.$sql="select * from `newstype` where `kid`='".$_POST['id']."'"; $q=mysql_query($sql);

代码如下	复制代码
//select 语句 1.//$q=mysql_query("select * from `newstype` where `kid`='".$_POST['id']."'"); 2.$sql="select * from `newstype` where `kid`='".$_POST['id']."'"; $q=mysql_query($sql);

上面的1和2的选项是因为 我写了一遍select语句出现报错了 然后我就又写了一遍 结果两个都对了 1 是注释掉了

代码如下	复制代码
echo "";

if(mysql_num_rows($q)!=0){  判断查找的语句的个数 如果是0的话就代表下面没有分支了 就不会显示了

//记住在$_POST[]加（）这是我出现的错误

代码如下	复制代码
while($rs=mysql_fetch_array($q)){ echo"".$rs['name']."";select里面的option选项 value的值一定要给 因为我们要按照这个查找语句 } echo ""; echo " ";因为做的是无限极联动 后面还要输出一个div的框 用来盛下一个的select框 } ?>

输出一个select选择框会添加到后来最终显示的页面的div里面 后面会做介绍

代码如下	复制代码
while($rs=mysql_fetch_array($q)){ echo"".$rs['name']."";select里面的option选项 value的值一定要给 因为我们要按照这个查找语句 } echo ""; echo " ";因为做的是无限极联动 后面还要输出一个div的框 用来盛下一个的select框 } ?>

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

下面的是Ajax.js文件var xmlhttp;定义一个变量

}
}function fun(n){  这个方法是展示页中 select onchange事件调用
createxml();

 代码如下

代码如下

复制代码

function createxml(){这个部分主要是用来判断浏览器 if(window.XMLHttpRequest){ XMLHttpRequest是javascript里面内置的属性 具体的作用 大家自己去翻手册 xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } } function fun(n){  这个方法是展示页中 select onchange事件调用 createxml(); var id=document.getElementById("s" n).value;  是选取对应的id的select里面的value值 就是我们上面说道的数据库中的ID字段 xmlhttp.open("post","Ajax.php",true);  打开请求 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //id之后还有一个 xmlhttp.send("id=" id "&num=" n); 发送请求 获取这个id的值 和 n的值 并且分别赋值给 id 和 num xmlhttp.onreadystatechange=function(){stylefun(n)}; 触发onreadystatechange调用stylefun(n)方法 并且设置n参数 } function stylefun(n){ if(xmlhttp.readyState==4 && xmlhttp.status==200){已经接受完成之后 把获得的text赋值给对应id的div标签里面 //innerHTML 记住html是大写 document.getElementById("list" n).innerHTML=xmlhttp.responseText; } }

复制代码

function createxml(){这个部分主要是用来判断浏览器

if(window.XMLHttpRequest){ XMLHttpRequest是javascript里面内置的属性 具体的作用 大家自己去翻手册

xmlhttp=new XMLHttpRequest();

代码如下	复制代码
mysql_connect("localhost","root","")or die("链接数据库失败"); mysql_select_db("aaa"); mysql_query("set names'UTF8'"); $sql="select * from `newstype` where `kid` = 0";先查找最初的根目录类型 $query=mysql_query($sql); while($rs=mysql_fetch_array($query)){ $arr[]=$rs; } ?> foreach($arr as $v){ echo "".$v['name'].""; } ?>

}else if(window.ActiveXObject){

xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');

var id=document.getElementById("s" n).value;  是选取对应的id的select里面的value值 就是我们上面说道的数据库中的ID字段xmlhttp.open("post","Ajax.php",true);  打开请求

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//id之后还有一个

xmlhttp.send("id=" id "&num=" n); 发送请求 获取这个id的值 和 n的值 并且分别赋值给 id 和 num

xmlhttp.onreadystatechange=function(){stylefun(n)}; 触发onreadystatechange调用stylefun(n)方法 并且设置n参数

}

function stylefun(n){if(xmlhttp.readyState==4 && xmlhttp.status==200){已经接受完成之后 把获得的text赋值给对应id的div标签里面//innerHTML 记住html是大写document.getElementById("list" n).innerHTML=xmlhttp.responseText;}} --------------------------------------------------------------------------------下面是展示页面liandong.php(原谅我起名字的时候都是很简单的思维)

代码如下	复制代码
mysql_connect("localhost","root","")or die("链接数据库失败");<🎜>mysql_select_db("aaa");<🎜>mysql_query("set names'UTF8'");<🎜>$sql="select * from `newstype` where `kid` = 0";先查找最初的根目录类型<🎜>$query=mysql_query($sql);<🎜>while($rs=mysql_fetch_array($query)){<🎜>$arr[]=$rs;<🎜>}<🎜><🎜>?>foreach($arr as $v){<🎜>echo "".$v['name']."";}?> 文章网址:随意转载^^但请附上教程地址。