第18周第2章JSON入门

二级联动菜单实现总结

1. 二级联动菜单的定义

二级联动菜单是一种数据联动的应用场景，在选择一级菜单项时动态加载并展示与之对应的二级菜单项。它通常用于前端通过 AJAX 与后端交互，实现数据的动态展示。

2. 应用场景举例

慕课网首页：在选择“前端开发”、“后端开发”等一级分类时，右侧会动态显示对应的二级知识点列表。
大型工厂：选择某个部门时动态显示该部门前100名员工信息。
电商网站：选择商品一级分类（如“电子产品”）时，显示对应的二级子分类（如“手机”、“电脑”）。

3. 为什么使用 AJAX 实现二级联动菜单

对于数据量小的场景，可以一次性加载所有数据并进行本地展示。但对于数据量大的场景，如大型工厂中的部门和员工数据，加载所有数据会导致页面加载速度慢、带宽和服务器压力大。因此，使用 AJAX 根据一级菜单的选择动态加载对应的二级数据是一种更高效的做法。

4. 实现步骤

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 {@Overrideprotected 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);}
}

<!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>