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 相关文章推荐
PHP网站提速三大“软”招
Oct 09 PHP
PHP新手上路(三)
Oct 09 PHP
PHP 手机归属地查询 api
Feb 08 PHP
dedecms函数分享之获取某一栏目所有子栏目
May 19 PHP
Yii中render和renderPartial的区别
Sep 03 PHP
php文件上传简单实现方法
Jan 24 PHP
php实现将字符串按照指定距离进行分割的方法
Mar 14 PHP
php header函数的常用http头设置
Jun 25 PHP
php类的定义与继承用法实例
Jul 07 PHP
详解WordPress开发中wp_title()函数的用法
Jan 07 PHP
PHP创建单例后台进程的方法示例
May 23 PHP
laravel框架中控制器的创建和使用方法分析
Nov 23 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 中的4种标记风格介绍
2012/05/10 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
ant design实现圈选功能
2019/12/17 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python绘制七段数码管实例代码
2017/12/20 Python
简单实现python画圆功能
2018/01/25 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
机械设计职业生涯规划书
2013/12/27 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
个人欠款担保书
2014/05/20 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
预备党员考察意见范文
2015/06/01 职场文书
毕业赠语大全
2015/06/23 职场文书
2016年敬老月活动总结
2016/04/05 职场文书