PHP+ajax实现二级联动菜单功能示例

2018-09-07 12:44

阅读：355

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

　　如何实现二级联动

　　工作原理

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

　　第一步：我们会向后台发送一个请求第二步：后台接受请求后，会返回给我们一个值第三步：将值用JS呈现在页面中

　　HTML代码

　　 <html> <head> <title>二级联动</title> <meta http-equiv=Content-Type content=text/html;charset=utf8> <script src=请选择省份</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数据 ?>

　　运行效果：