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的责任链编程模式,也是开发团队广泛采用的一种编程方式约定,需要的朋友可以参考下2015-08-08
抓取远程内容，之前一直都在用file_get_content函数，其实早就知道有curl这么一个好东西的存在，但是看了一眼后感觉使用颇有些复杂，没有file_get_content那么简单，再就是需求也不大，所以没有学习使用curl2014-05-05
这篇文章主要介绍了PHP实现通过中文字符比率来判断垃圾评论的方法,是一个比较实用的技巧,对于进行PHP应用程序开发来说有一定的参考借鉴价值,需要的朋友可以参考下2014-10-10
守护进程（Daemon）是运行在后台的一种特殊进程。下面这篇文章主要给大家介绍了关于php进程daemon化的正确实现方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧2018-09-09
这篇文章主要介绍了PHP使用PHPExcel删除Excel单元格指定列的方法,涉及PHPExcel针对Excel单元格的遍历操作及removeColumn方法删除单元格的相关使用技巧,需要的朋友可以参考下2016-07-07
PHP作为一种广泛使用的服务器端脚本语言,在处理大量数据或复杂任务时,常常会遇到内存溢出的问题,本文将探讨解决PHP内存溢出问题的最佳实践,大家可以根据需求进行选择2025-03-03
这篇文章主要介绍了php实现可用于mysql,mssql,pg数据库操作类,以类的形式封装了对mysql,mssql,pg三种数据库的操作,非常具有实用价值,需要的朋友可以参考下2014-12-12
小笔记, PHP 遍历所有文件, 包括子目录中的文件. 和压缩文件的类结合起来的话, 就可以打包整个目录了.2011-05-05
这篇文章主要介绍了PHP基于ORM方式操作MySQL数据库,结合具体实例形式分析了php针对mysql数据库常用操作的封装与使用技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了PHP预定义超全局数组变量,结合实例形式总结分析了预定义超全局数组变量的特性、功能、使用方法及相关操作注意事项,需要的朋友可以参考下2018-08-08
最新评论