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

 更新时间:2018年08月10日 09:23:56   作者:JohnKenneth  
这篇文章主要介绍了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(!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程序设计有所帮助。

相关文章

  • PHP APC配置文件2套和参数详解

    PHP APC配置文件2套和参数详解

    这篇文章主要介绍了PHP APC配置文件2套和参数详解,需要的朋友可以参考下
    2014-06-06
  • PHP parse_ini_file函数的应用与扩展操作示例

    PHP parse_ini_file函数的应用与扩展操作示例

    这篇文章主要介绍了PHP parse_ini_file函数的应用与扩展操作,结合实例形式分析了php扩展parse_ini_file函数解析配置文件相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Windows2003 下 MySQL 数据库每天自动备份

    Windows2003 下 MySQL 数据库每天自动备份

    Windows2003 下 MySQL 数据库每天自动备份...
    2006-12-12
  • php使用timthumb生成缩略图的方法

    php使用timthumb生成缩略图的方法

    这篇文章主要介绍了php使用timthumb生成缩略图的方法,实例分析了PHP调用timthumb生成缩略图的操作技巧与相关注意事项,需要的朋友可以参考下
    2016-01-01
  • PHP 模拟登陆功能实例详解

    PHP 模拟登陆功能实例详解

    这篇文章主要介绍了PHP 模拟登陆功能,结合实例形式详细分析了php基于curl的模拟表单登陆及session信息存储相关操作技巧,需要的朋友可以参考下
    2019-09-09
  • php目录遍历函数opendir用法实例

    php目录遍历函数opendir用法实例

    这篇文章主要介绍了php目录遍历函数opendir用法,以实例形式详细分析了opendir原理与用法,是PHP进行目录操作的一个重要函数,需要的朋友可以参考下
    2014-11-11
  • curl和libcurl的区别简介

    curl和libcurl的区别简介

    这篇文章主要介绍了curl和libcurl的区别简介,本文讲解了curl简介、libcurl简介、curl与libcurl对比、“curl”的不同意思、PHP中使用curl和libcurl等内容,这么多的curl,搞都搞不懂,看了本文才知道,我们一直用的其实是libcurl,需要的朋友可以参考下
    2015-07-07
  • PHP yield关键字功能与用法分析

    PHP yield关键字功能与用法分析

    这篇文章主要介绍了PHP yield关键字功能与用法,结合实例形式分析了php5.5新增的yield关键字功能与相关使用技巧,需要的朋友可以参考下
    2019-01-01
  • PHP连接SQLSERVER 注意事项(附dll文件下载)

    PHP连接SQLSERVER 注意事项(附dll文件下载)

    文章是网上找的,从来没有弄过,一直是php+mysql 现在搞个php+mssql 也不懂,没有办法,从网上找了些资料,我是看了这些资料,才连上的mssql的第一次感觉真的挺费劲的,这些可能不需要全部看完就ok,我也是这一点那一点,可能是我比较笨吧!呵呵
    2012-06-06
  • php快速查找数据库中恶意代码的方法

    php快速查找数据库中恶意代码的方法

    这篇文章主要介绍了php快速查找数据库中恶意代码的方法,可实现针对特殊字符的过滤功能,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论