Home > php教程 > php手册 > Ajax+php无限联动下拉菜单实例

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

WBOY
Release: 2016-05-25 16:55:11
Original
1126 people have browsed it
Ajax无限联动实现方法就是先由用户选择大类,然后我们再用ajax实现数据局部请求给php页面处理,php把用户需要的数据返回到html js进行处理,这样就实现了无限联动下拉菜单的效果了。

首先是 Ajax.php文件:

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

 代码如下 复制代码

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);

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

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

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

 代码如下 复制代码
echo "

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

 代码如下 复制代码

while($rs=mysql_fetch_array($q)){
echo"";select里面的option选项 value的值一定要给 因为我们要按照这个查找语句
}
echo "";
echo "

";因为做的是无限极联动 后面还要输出一个div的框 用来盛下一个的select框
}
?>


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

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

 代码如下 复制代码

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;
}
}


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

下面是展示页面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;
}

?>














文章网址:

随意转载^^但请附上教程地址。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template