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

如何实现二级联动

工作原理

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

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

HTML代码

<html><head><title>www.rzxsoft.cn 二级联动</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程序设计有所帮助。