第18周第2章JSON入门

news2024/9/30 5:28:02

二级联动菜单实现总结

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

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