当前位置：首页 > PHP教程 > php高级应用 > 列表

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

发布:smiling　来源: PHP粉丝网　添加日期：2021-10-23 14:26:42　浏览: 评论：0　

这篇文章主要介绍了PHP+ajax实现二级联动菜单功能,涉及php结合ajax的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下。

本文实例讲述了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(!emptyempty($address[$key])){ //有值，组装数据

    $result['status'] = 200;

    $result['data'] = $address[$key];

  }else{ //无值，返回状态码220

    $result['status'] = 220;

  }

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

?>