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


Posted in PHP onAugust 10, 2018

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

如何实现二级联动

工作原理

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

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

HTML代码

<html>
<head>
<title>3water.com 二级联动</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+ajax实现二级联动菜单功能示例

其实三级联动和二级联动的原理都是一样的,只是在其基础上在重复一次而已

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
How do I change MySQL timezone?
Mar 26 PHP
drupal 代码实现URL重写
May 04 PHP
php中使用explode查找某个字符是否存在的方法
Jul 12 PHP
php中in_array函数用法分析
Nov 15 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
Mar 03 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
May 13 PHP
php生成curl命令行的方法
Dec 14 PHP
php实现统计目录文件大小的函数
Dec 25 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
Apr 14 PHP
PHP大文件分片上传的实现方法
Oct 28 PHP
PHP PDOStatement::fetchObject讲解
Feb 01 PHP
解决Laravel5.5下的toArray问题
Oct 15 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
Aug 10 #PHP
PHP实现的服务器一致性hash分布算法示例
Aug 09 #PHP
PHP检查端口是否可以被绑定的方法示例
Aug 09 #PHP
php对象工厂类完整示例
Aug 09 #PHP
php闭包中使用use声明变量的作用域实例分析
Aug 09 #PHP
php生成二维码不保存服务器还有下载功能的实现代码
Aug 09 #PHP
PHP命令Command模式用法实例分析
Aug 08 #PHP
You might like
PHP实现图片简单上传
2006/10/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python显示生日是星期几的方法
2015/05/27 Python
Python序列操作之进阶篇
2016/12/08 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Sublime开发python程序的示例代码
2018/01/24 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python集合操作方法详解
2020/02/09 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python数字类型math库原理解析
2020/03/02 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
python如何编写win程序
2020/06/08 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
自我评价中英文语句
2013/11/30 职场文书
大学生军训广播稿
2014/01/24 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2016新年慰问信范文
2015/03/25 职场文书
专家推荐信怎么写
2015/03/25 职场文书
Python源码解析之List
2021/05/21 Python