主页 > 知识库 > PHP+ajax实现二级联动菜单功能示例

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

热门标签:Linux服务器 团购网站 银行业务 阿里云 服务器配置 电子围栏 科大讯飞语音识别系统 Mysql连接数设置

本文实例讲述了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;iaddress.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程序设计有所帮助。

您可能感兴趣的文章:
  • ajax三级联动下拉菜单效果
  • AJAX省市区三级联动下拉菜单(java版)
  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
  • ajax读取数据库内容实现二级联动下拉选择菜单示例
  • Ajax二级联动菜单实现原理及代码
  • 基于asp+ajax和数据库驱动的二级联动菜单
  • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
  • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
  • 琥珀无限级分类联动菜单AJAX版
  • Ajax实现二级联动菜单

标签:衡水 萍乡 蚌埠 大理 江苏 衢州 枣庄 广元

巨人网络通讯声明:本文标题《PHP+ajax实现二级联动菜单功能示例》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266