当前位置:首页 > PHP教程 > php高级应用 > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2021-10-23 14:26:42 浏览: 评论:0 

这篇文章主要介绍了PHP+ajax实现二级联动菜单功能,涉及php结合ajax的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下。

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

如何实现二级联动

工作原理

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

第一步:我们会向后台发送一个请求

第二步:后台接受请求后,会返回给我们一个值

第三步:将值用JS呈现在页面中

HTML代码

  1. <html> 
  2. <head> 
  3. <title>www.jb51.net 二级联动</title> 
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf8"> 
  5. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
  6. <style> 
  7. #area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;} 
  8. .area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;} 
  9. </style> 
  10. <head> 
  11. <body> 
  12.   <div id="area-box"> 
  13.     <select class="area-select" id='address'> 
  14.       <option value="0">请选择省份</option> 
  15.       <option value="1">四川</option> 
  16.       <option value="2">河北</option> 
  17.       <option value="3">湖南</option> 
  18.     </select> 
  19.     <select class="area-select" id="city"> 
  20.       <option>请选择城市</option> 
  21.     </select> 
  22.   </div> 
  23.   <script> 
  24.   $(function(){ 
  25.     //初始化数据 
  26.     var url = 'address.php'; //后台地址 
  27.     $("#address").change(function(){ //监听下拉列表的change事件 
  28.       var address = $(this).val(); //获取下拉列表选中的值 
  29.       //发送一个post请求 
  30.       $.ajax({ 
  31.         type:'post', 
  32.         url:url, 
  33.         data:{key:address}, 
  34.         dataType:'json', 
  35.         success:function(data){ //请求成功回调函数 
  36.           var status = data.status; //获取返回值 
  37.           var address = data.data; 
  38.           if(status == 200){ //判断状态码,200为成功 
  39.             var option = ''
  40.             for(var i=0;i<address.length;i++){ //循环获取返回值,并组装成html代码 
  41.               option +='<option>'+address[i]+'</option>'; 
  42.             } 
  43.           }else{ 
  44.             var option = '<option>请选择城市</option>'; //默认值 
  45.           } 
  46.           $("#city").html(option); //js刷新第二个下拉框的值 
  47.         }, 
  48.       }); 
  49.     }); 
  50.   }); 
  51.   </script> 
  52. </body> 

PHP代码

  1. <?php 
  2.   $key = $_POST['key']; //获取值 
  3.   $address[1] = array('成都','绵阳','德阳'); 
  4.   $address[2] = array('石家庄','唐山','秦皇岛'); 
  5.   $address[3] = array('长沙','株洲','湘潭'); 
  6.   if(!emptyempty($address[$key])){ //有值,组装数据 
  7.     $result['status'] = 200; 
  8.     $result['data'] = $address[$key]; 
  9.   }else//无值,返回状态码220 
  10.     $result['status'] = 220; 
  11.   } 
  12.   echo json_encode($result); //返回JSON数据 
  13. ?>

Tags: PHP+ajax二级联动

分享到: