二级联动菜单实现总结
1. 二级联动菜单的定义
二级联动菜单是一种数据联动的应用场景，在选择一级菜单项时动态加载并展示与之对应的二级菜单项。它通常用于前端通过 AJAX 与后端交互，实现数据的动态展示。
2. 应用场景举例
- 慕课网首页：在选择"前端开发"、"后端开发"等一级分类时，右侧会动态显示对应的二级知识点列表。
- 大型工厂：选择某个部门时动态显示该部门前100名员工信息。
- 电商网站：选择商品一级分类（如"电子产品"）时，显示对应的二级子分类（如"手机"、"电脑"）。
3. 为什么使用 AJAX 实现二级联动菜单
对于数据量小的场景，可以一次性加载所有数据并进行本地展示。但对于数据量大的场景，如大型工厂中的部门和员工数据，加载所有数据会导致页面加载速度慢、带宽和服务器压力大。因此，使用 AJAX 根据一级菜单的选择动态加载对应的二级数据是一种更高效的做法。
4. 实现步骤
Java代码注释
java
package com.imooc.ajax.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.imooc.ajax.entity.Channel;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/channel") // 将当前Servlet映射到 /channel URL路径上
public class ChannelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取请求参数中的 level 和 parent 参数值
String level = request.getParameter("level");
String parent = request.getParameter("parent");
// 创建一个用于存储频道数据的列表
List<Channel> chlist = new ArrayList<>();
// 判断是否请求一级频道数据
if(level.equals("1")){
// 添加一级频道数据：人工智能和前端开发
chlist.add(new Channel("ai", "人工智能"));
chlist.add(new Channel("web", "前端开发"));
}
// 判断是否请求二级频道数据
else if(level.equals("2")){
// 判断 parent 是否为 "ai"（人工智能），返回对应的二级频道数据
if(parent.equals("ai")){
chlist.add(new Channel("dl", "深度学习"));
chlist.add(new Channel("cv", "计算机视觉"));
chlist.add(new Channel("nlp", "自然语言处理"));
}
// 判断 parent 是否为 "web"（前端开发），返回对应的二级频道数据
else if(parent.equals("web")){
chlist.add(new Channel("html", "HTML超文本标记语言"));
chlist.add(new Channel("css", "CSS级联样式表"));
chlist.add(new Channel("js", "JavaScript脚本"));
}
}
// 将频道列表对象转换为 JSON 格式字符串
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(chlist);
// 设置响应的内容类型和编码格式
response.setContentType("application/json;charset=utf-8");
// 将 JSON 数据写入响应输出流
response.getWriter().println(json);
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动菜单示例</title>
<!-- 引入 axios 库用于 AJAX 请求 -->
<script src="/js/axios.js"></script>
</head>
<body>
<!-- 一级频道下拉框，默认有一个"请选择"选项 -->
<select id="lv1" style="width: 200px;height: 30px">
<option value="-1" selected="selected">请选择</option>
</select>
<!-- 二级频道下拉框，初始无选项 -->
<select id="lv2" style="width: 200px;height: 30px"></select>
<script>
// 获取一级频道下拉框的 DOM 对象
var lv1 = document.getElementById("lv1");
// 发送 AJAX 请求获取一级频道数据
axios.get("/channel" , {params:{"level" : 1}})
.then(function (response){
// 获取服务器返回的 JSON 数据
var json = response.data;
console.log(json); // 在控制台打印数据，便于调试
// 遍历 JSON 数据，将每个频道添加为下拉框的选项
for(var i = 0 ; i < json.length ; i++){
var channel = json[i];
lv1.options.add(new Option(channel.name, channel.code));
}
});
// 获取二级频道下拉框的 DOM 对象
var lv2 = document.getElementById("lv2");
// 当一级频道的选择发生变化时触发事件
lv1.onchange = function(){
// 发送 AJAX 请求获取对应的二级频道数据
axios.get("/channel" , {params:{"level":2,"parent" : lv1.value}})
.then(function(response){
// 获取服务器返回的 JSON 数据
var json = response.data;
console.log(json); // 在控制台打印数据，便于调试
// 清空二级频道下拉框的所有选项
lv2.length = 0;
// 遍历 JSON 数据，将每个频道添加为二级下拉框的选项
for(var i = 0 ; i < json.length ; i++){
var channel = json[i];
lv2.options.add(new Option(channel.name,channel.code));
}
});
};
</script>
</body>
</html>5. 实现效果
- 当选择一级频道时，动态加载并展示对应的二级频道数据。
- 每次切换一级频道，二级频道数据都会被清空并重新加载，避免数据叠加问题。
- 如果选择无效的一级频道（如默认选项），二级频道不会加载数据。
6. 拓展应用
在二级联动的基础上，可以扩展实现三级联动、四级联动等更复杂的数据联动场景。只需按照相同的逻辑，逐级加载数据即可。