Java实现二级联动

简介

在Web开发中，二级联动是一种常见的功能需求，它允许用户在一个下拉列表中选择一个选项后，另一个下拉列表会根据所选选项的不同而实时更新。本文将教你如何使用Java实现二级联动功能。

整体流程

下面是实现二级联动的整体流程：

步骤 描述
1. 创建数据库表格
2. 读取数据库数据
3. 创建页面
4. 使用Ajax发送请求
5. 根据请求参数查询数据库
6. 返回查询结果
7. 更新页面下拉列表

现在，我们将逐步介绍每个步骤需要做什么，并列出相应的代码。

步骤一：创建数据库表格

首先，我们需要创建两个数据库表格，一个用于存储一级选项，另一个用于存储二级选项。每个表格至少应包含一个主键和一个选项名称列。

-- 一级选项表格
CREATE TABLE first_level_options (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100)
);

-- 二级选项表格
CREATE TABLE second_level_options (
    id INT PRIMARY KEY AUTO_INCREMENT,
    first_level_id INT,
    name VARCHAR(100)
);

步骤二：读取数据库数据

接下来，我们需要编写Java代码来读取数据库中的数据，并将其存储在合适的数据结构中。这里我们使用HashMap来存储一级选项和对应的二级选项列表。

import java.sql.*;
import java.util.*;

public class DatabaseReader {
    public static Map<String, List<String>> readData() {
        Map<String, List<String>> data = new HashMap<>();
        
        // 连接数据库
        try (Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "username", "password")) {
            // 查询一级选项
            try (Statement statement = connection.createStatement()) {
                ResultSet resultSet = statement.executeQuery("SELECT * FROM first_level_options");
                while (resultSet.next()) {
                    String firstLevelOption = resultSet.getString("name");
                    List<String> secondLevelOptions = new ArrayList<>();
                    
                    // 查询对应的二级选项
                    try (PreparedStatement preparedStatement = connection.prepareStatement("SELECT * FROM second_level_options WHERE first_level_id = ?")) {
                        preparedStatement.setInt(1, resultSet.getInt("id"));
                        ResultSet secondLevelResultSet = preparedStatement.executeQuery();
                        while (secondLevelResultSet.next()) {
                            secondLevelOptions.add(secondLevelResultSet.getString("name"));
                        }
                    }
                    
                    data.put(firstLevelOption, secondLevelOptions);
                }
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        return data;
    }
}

步骤三：创建页面

现在，我们需要创建一个HTML页面，其中包含两个下拉列表，一个用于显示一级选项，另一个用于显示二级选项。

<!DOCTYPE html>
<html>
<head>
    <title>二级联动</title>
</head>
<body>
    <!-- 一级选项下拉列表 -->
    <select id="firstLevelSelect" onchange="loadSecondLevelOptions()">
        <option value="">请选择一级选项</option>
    </select>
    
    <!-- 二级选项下拉列表 -->
    <select id="secondLevelSelect">
        <option value="">请选择二级选项</option>
    </select>

    <!-- 加载一级选项 -->
    <script>
        window.onload = function() {
            loadFirstLevelOptions();
        };
        
        function loadFirstLevelOptions() {
            // 使用Ajax发送GET请求
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/firstLevelOptions", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var firstLevelOptions = JSON.parse(xhr.responseText);
                    var firstLevelSelect = document.getElementById("firstLevelSelect");
                    
                    // 更新一级选项下拉列表
                    for (var i = 0; i < firstLevelOptions.length; i++) {
                        var option = document.createElement("option");
                        option.text = firstLevelOptions[i];
                        firstLevelSelect.add(option);
                    }
                }
            };
            xhr.send();
        }
        
        function loadSecondLevelOptions() {
            var firstLevelSelect = document.getElementById("firstLevelSelect");
            var selectedFirstLevelOption = firstLevelSelect.options[firstLevelSelect.selectedIndex].text;
            var secondLevelSelect = document.getElementById("secondLevelSelect");