Ajax 技术学习（JavaEE）—— 实现二级下拉联动

以下是一个简化的示例，展示了如何使用jQuery和Java后端来实现二级下拉联动的一部分。前端使用jQuery来处理Ajax请求，后端使用Servlet处理请求并返回数据。

前端代码（HTML + jQuery）:




<!DOCTYPE html>
<html>
<head>
    <title>二级下拉联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#firstSelect').change(function() {
                var firstValue = $(this).val();
                if (firstValue != '') {
                    $.ajax({
                        url: 'GetSecondLevelItems',
                        type: 'POST',
                        data: {firstValue: firstValue},
                        success: function(data) {
                            var secondSelect = $('#secondSelect');
                            secondSelect.find('option').remove();
                            $.each(data, function(key, value) {
                                secondSelect.append($('<option></option>').attr('value', key).text(value));
                            });
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <select id="firstSelect">
        <option value="">请选择第一级分类</option>
        <option value="category1">第一级分类1</option>
        <option value="category2">第一级分类2</option>
    </select>
    <select id="secondSelect">
        <option value="">请选择第二级分类</option>
    </select>
</body>
</html>

后端代码（Java Servlet）:




import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
 
public class GetSecondLevelItems extends HttpServlet {
    private Map<String, Map<String, String>> categories = new HashMap<>();
 
    @Override
    public void init() {
        // 初始化分类数据
        Map<String, String> category1Items = new HashMap<>();
        category1Items.put("1", "第二级分类1-1");
        category1Items.put("2", "第二级分类1-2");
        categories.put("category1", category1Items);
 
        Map<String, String> category2Items = new HashMap<>();
        category2Items.put("3", "第二级分类2-1");
        category2Items.put("4", "第二级分类2-2");
        categories.put("category2", category2Items);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String firstValue = request.getParameter("firstValue");
        response.s

Ajax 技术学习（JavaEE）—— 实现二级下拉联动

评论已关闭

推荐阅读