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

admin

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

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。
第一步：我们会向后台发送一个请求；
第二步：后台接受请求后，会返回给我们一个值；
第三步：将值用JS呈现在页面中。
HTML代码：

1. <html>
   
2. <head>
   
3. <title>二级联动</title>
   
4. <meta http-equiv="Content-Type" content="text/html;charset=utf8">
   
5. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   
6. <style>
   
7. #area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
   
8. .area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
   
9. </style>
   
10. <head>
    
11. <body>
    
12.   <div id="area-box">
    
13.     <select class="area-select" id='address'>
    
14.       <option value="0">请选择省份</option>
    
15.       <option value="1">四川</option>
    
16.       <option value="2">河北</option>
    
17.       <option value="3">湖南</option>
    
18.     </select>
    
19.     <select class="area-select" id="city">
    
20.       <option>请选择城市</option>
    
21.     </select>
    
22.   </div>
    
23.   <script>
    
24.   $(function(){
    
25.     //初始化数据
    
26.     var url = 'address.php'; //后台地址
    
27.     $("#address").change(function(){ //监听下拉列表的change事件
    
28.       var address = $(this).val(); //获取下拉列表选中的值
    
29.       //发送一个post请求
    
30.       $.ajax({
    
31.         type:'post',
    
32.         url:url,
    
33.         data:{key:address},
    
34.         dataType:'json',
    
35.         success:function(data){ //请求成功回调函数
    
36.           var status = data.status; //获取返回值
    
37.           var address = data.data;
    
38.           if(status == 200){ //判断状态码，200为成功
    
39.             var option = '';
    
40.             for(var i=0;i<address.length;i++){ //循环获取返回值，并组装成html代码
    
41.               option +='<option>'+address[i]+'</option>';
    
42.             }
    
43.           }else{
    
44.             var option = '<option>请选择城市</option>'; //默认值
    
45.           }
    
46.           $("#city").html(option); //js刷新第二个下拉框的值
    
47.         },
    
48.       });
    
49.     });
    
50.   });
    
51.   </script>
    
52. </body>

复制代码

php代码：

1. <?php
   
2.   $key = $_POST['key']; //获取值
   
3.   $address[1] = array('成都','绵阳','德阳');
   
4.   $address[2] = array('石家庄','唐山','秦皇岛');
   
5.   $address[3] = array('长沙','株洲','湘潭');
   
6.   if(!empty($address[$key])){ //有值，组装数据
   
7.     $result['status'] = 200;
   
8.     $result['data'] = $address[$key];
   
9.   }else{ //无值，返回状态码220
   
10.     $result['status'] = 220;
    
11.   }
    
12.   echo json_encode($result); //返回JSON数据
    
13. ?>
    

复制代码

运行效果：