本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考,具体如下:
如何实现二级联动
工作原理
二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,它只会刷新我们需要改变值的地方,我们首先看下它的工作流程。
第一步:我们会向后台发送一个请求
第二步:后台接受请求后,会返回给我们一个值
第三步:将值用JS呈现在页面中
HTML代码
二级联动
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
请选择省份
四川
河北
湖南
请选择城市
$(function(){
//初始化数据
var url = 'address.php'; //后台地址
$("#address").change(function(){ //监听下拉列表的change事件
var address = $(this).val(); //获取下拉列表选中的值
//发送一个post请求
$.ajax({
type:'post',
url:url,
data:{key:address},
dataType:'json',
success:function(data){ //请求成功回调函数
var status = data.status; //获取返回值
var address = data.data;
if(status == 200){ //判断状态码,200为成功
var option = '';
for(var i=0;i
option +=''+address[i]+'';
}
}else{
var option = '请选择城市'; //默认值
}
$("#city").html(option); //js刷新第二个下拉框的值
},
});
});
});
PHP代码
$key = $_POST['key']; //获取值
$address[1] = array('成都','绵阳','德阳');
$address[2] = array('石家庄','唐山','秦皇岛');
$address[3] = array('长沙','株洲','湘潭');
if(!empty($address[$key])){ //有值,组装数据
$result['status'] = 200;
$result['data'] = $address[$key];
}else{ //无值,返回状态码220
$result['status'] = 220;
}
echo json_encode($result); //返回JSON数据
?>
运行效果:
其实三级联动和二级联动的原理都是一样的,只是在其基础上在重复一次而已
希望本文所述对大家PHP程序设计有所帮助。