当前位置：首页 > 行业动态 > 正文

AJAX 二级级联菜单实现代码

admin
行业动态
2025-03-19
1

AJAX 二级级联菜单的实现通常涉及前端和后端的协作。前端使用 JavaScript 发送异步请求，后端处理请求并返回数据。以下是一个简单的示例代码：“

html，，，，，AJAX 二级级联菜单，， function loadSubMenu(value) {， var xhr = new XMLHttpRequest();， xhr.open('GET', 'get_submenu.php?parent=' + value, true);， xhr.onreadystatechange = function() {， if (xhr.readyState == 4 && xhr.status == 200) {， document.getElementById('submenu').innerHTML = xhr.responseText;， }， };， xhr.send();， }，，，，，Option 1，Option 2，，，，，

` 在 get_submenu.php 中，根据 parent` 参数查询数据库并返回相应的子菜单选项。

前端HTML部分

创建一个基本的HTML结构，包含两个下拉菜单元素，一个用于选择一级菜单选项，另一个用于显示对应的二级菜单选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级级联菜单示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="firstMenu">一级菜单:</label>
    <select id="firstMenu" name="firstMenu">
        <option value="">--请选择--</option>
    </select>
    <label for="secondMenu">二级菜单:</label>
    <select id="secondMenu" name="secondMenu">
        <option value="">--请选择--</option>
    </select>
    <script src="cascade.js"></script>
</body>
</html>

前端JavaScript部分（cascade.js）

使用jQuery库来简化AJAX请求的处理，当一级菜单的选项发生变化时，通过AJAX请求获取对应的二级菜单数据，并更新二级菜单的选项。

$(document).ready(function() {
    // 初始化一级菜单
    function initFirstMenu() {
        $.ajax({
            url: 'getFirstMenuOptions', // 替换为获取一级菜单选项的URL
            method: 'GET',
            success: function(data) {
                var firstMenu = $('#firstMenu');
                firstMenu.empty(); // 清空已有选项
                firstMenu.append('<option value="">--请选择--</option>');
                $.each(data, function(index, item) {
                    firstMenu.append('<option value="' + item.id + '">' + item.name + '</option>');
                });
            }
        });
    }
    // 根据一级菜单的选择加载二级菜单选项
    function loadSecondMenuOptions() {
        var firstMenuValue = $('#firstMenu').val();
        if (firstMenuValue === '') {
            $('#secondMenu').empty().append('<option value="">--请选择--</option>');
            return;
        }
        $.ajax({
            url: 'getSecondMenuOptions', // 替换为根据一级菜单获取二级菜单选项的URL
            method: 'GET',
            data: { parentId: firstMenuValue },
            success: function(data) {
                var secondMenu = $('#secondMenu');
                secondMenu.empty();
                secondMenu.append('<option value="">--请选择--</option>');
                $.each(data, function(index, item) {
                    secondMenu.append('<option value="' + item.id + '">' + item.name + '</option>');
                });
            }
        });
    }
    // 初始化一级菜单
    initFirstMenu();
    // 绑定一级菜单的change事件，以便在选项变化时加载二级菜单选项
    $('#firstMenu').change(function() {
        loadSecondMenuOptions();
    });
});

后端部分（以Java为例）

假设使用Spring Boot框架来实现后端逻辑，包括提供获取一级菜单和二级菜单数据的接口。

1、创建实体类：根据数据库表结构创建相应的实体类，例如Menu类。

public class Menu {
    private Long id;
    private String name;
    private Long parentId;
    // getters and setters
}

2、创建服务层接口和实现类：定义服务层接口MenuService，并在实现类中实现获取菜单数据的方法。

public interface MenuService {
    List<Menu> getAllMenus();
    List<Menu> getMenusByParentId(Long parentId);
}
@Service
public class MenuServiceImpl implements MenuService {
    @Autowired
    private MenuRepository menuRepository; // 假设使用了JPA
    @Override
    public List<Menu> getAllMenus() {
        return menuRepository.findAll();
    }
    @Override
    public List<Menu> getMenusByParentId(Long parentId) {
        return menuRepository.findByParentId(parentId);
    }
}

3、创建控制器类：定义控制器类MenuController，提供获取一级菜单和二级菜单数据的接口。

@RestController
@RequestMapping("/menu")
public class MenuController {
    @Autowired
    private MenuService menuService;
    @GetMapping("/getFirstMenuOptions")
    public List<Menu> getFirstMenuOptions() {
        // 这里可以根据具体需求筛选出一级菜单数据，以下仅为示例
        return menuService.getAllMenus().stream()
                .filter(menu -> menu.getParentId() == null)
                .collect(Collectors.toList());
    }
    @GetMapping("/getSecondMenuOptions")
    public List<Menu> getSecondMenuOptions(@RequestParam Long parentId) {
        return menuService.getMenusByParentId(parentId);
    }
}