php js 二级联动_PHP+ajax实现二级联动菜单功能示例

本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考，具体如下：

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。

第一步：我们会向后台发送一个请求

第二步：后台接受请求后，会返回给我们一个值

第三步：将值用JS呈现在页面中

HTML代码

www.jb51.net 二级联动

#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程序设计有所帮助。