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 相关文章推荐
在PWS上安装PHP4.0正式版
Oct 09 PHP
php学习 字符串课件
Jun 15 PHP
探讨php中header的用法详解
Jun 07 PHP
php中的静态变量的基本用法
Mar 20 PHP
PHP中的多行字符串传递给JavaScript的两种方法
Jun 19 PHP
destoon安全设置中需要设置可写权限的目录及文件
Jun 21 PHP
PHP动态规划解决0-1背包问题实例分析
Mar 23 PHP
10款PHP开源商城系统汇总介绍
Jul 23 PHP
PHP获取当前文件的父目录方法汇总
Jul 21 PHP
php实现基于PDO的预处理示例
Mar 28 PHP
Laravel核心解读之异常处理的实践过程
Feb 24 PHP
Laravel框架处理用户的请求操作详解
Dec 20 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
Python  连接字符串(join %)
2008/09/06 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python查询mysql,返回json的实例
2018/03/26 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
super关键字的用法
2012/04/10 面试题
学生自我鉴定模板
2013/12/30 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
《叶问2》观后感
2015/06/15 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers