本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考，具体如下：
如何实现二级联动
工作原理
二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。
第一步：我们会向后台发送一个请求
第二步：后台接受请求后，会返回给我们一个值
第三步：将值用JS呈现在页面中
HTML代码
<html>
<head>
<title>www.jb51.net 二级联动</title>
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf8\">
<script src=\"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js\"></script>
<style>
#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;}
</style>
<head>
<body>
<div id=\"area-box\">
<select class=\"area-select\" id=\'address\'>
<option value=\"0\">请选择省份</option>
<option value=\"1\">四川</option>
<option value=\"2\">河北</option>
<option value=\"3\">湖南</option>
</select>
<select class=\"area-select\" id=\"city\">
<option>请选择城市</option>
</select>
</div>
<script>
$(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<address.length;i++){ //循环获取返回值，并组装成html代码
option +=\'<option>\'+address[i]+\'</option>\';
}
}else{
var option = \'<option>请选择城市</option>\'; //默认值
}
$(\"#city\").html(option); //js刷新第二个下拉框的值
},
});
});
});
</script>
</body>
PHP代码
<?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相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
© 版权声明
THE END
暂无评论内容