[学习交流] 【广州PHP】PHP+ajax实现二级联动菜单功能

本帖最后由 gz_xudada 于 2018-8-31 19:03 编辑

1. 实现二级联动步骤

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

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

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

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

2. HTML代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <style type="text/css">
        #area-box{
            width:500px;
            height:400px;
            margin:0 auto;
        }
        .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>
        </select>
        <select class="area-select" id="city">
            <option>请选择城市</option>
        </select>
    </div>
    
    <!-- 引入jquery库 -->
    <script type='text/javascript' src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type='text/javascript'>
         $(function () {
         //初始化数据
         var url = 'select.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 + '</option>';
                         }
                     }else{
                         var option = '<option>请选择城市</option>'; //默认值
                     }
                     $("#city").html(option); //js刷新第二个下拉框的值
                 },
             });
         });
     });

    </script>

</body>
</html>

3. PHP代码

[PHP] 纯文本查看 复制代码

<?php
  $key = $_POST['key']; //获取ajax传过来的值

  // 定义数组
  $address[1] = [
    "广州市",
    "韶关市",
    "深圳市",
    "珠海市",
    "汕头市",
    "佛山市",
    "江门市",
    "湛江市",
    "茂名市",
    "肇庆市",
    "惠州市",
    "梅州市",
    "汕尾市",
    "河源市",
    "阳江市",
    "清远市",
    "东莞市",
    "中山市",
    "潮州市",
    "揭阳市",
    "云浮市"
  ];

  // 定义数组
  $address[2] = [
    "长沙市",
    "株洲市",
    "湘潭市",
    "衡阳市",
    "邵阳市",
    "岳阳市",
    "常德市",
    "张家界市",
    "益阳市",
    "郴州市",
    "永州市",
    "怀化市",
    "娄底市"
  ];


  if(!empty($address[$key])){ //如果有值，组装数据,返回状态码200
    $result['status'] = 200;
    $result['data'] = $address[$key];
  }else{ //无值，返回状态码220
    $result['status'] = 220;
  }

  echo json_encode($result); //返回JSON数据
?>

4. 运行效果

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州PHP】PHP+ajax实现二级联动菜单功能

0 个回复