jsp省市县三级联动

JSP省市县三级联动是一种常见的Web应用功能，用于在前端页面上实现省、市、县三级行政区划的下拉菜单联动效果。用户选择省份后，市级下拉菜单会动态更新为该省份下的所有市；选择市后，县级下拉菜单会更新为该市下的所有县。

基础概念

JSP（JavaServer Pages）：一种服务器端技术，用于创建动态网页。
AJAX（Asynchronous JavaScript and XML）：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

类型

静态数据联动：预先定义好所有省市区的数据，在前端通过JavaScript进行处理。
动态数据联动：通过AJAX从服务器实时获取数据。

应用场景

注册表单：用户在填写地址时，需要选择省市区。
物流系统：根据用户选择的地址，自动填充对应的配送信息。
数据分析：根据用户选择的行政区划，展示相应的数据统计。

示例代码

前端HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>省市县三级联动</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="county">
        <option value="">请选择县区</option>
    </select>

    <script>
        $(document).ready(function() {
            // 初始化省份数据
            $.getJSON("getProvinces", function(data) {
                $.each(data, function(index, item) {
                    $("#province").append($('<option>', {
                        value: item.id,
                        text: item.name
                    }));
                });
            });

            // 省份改变时加载城市数据
            $("#province").change(function() {
                var provinceId = $(this).val();
                $("#city").empty().append('<option value="">请选择城市</option>');
                $("#county").empty().append('<option value="">请选择县区</option>');
                if (provinceId) {
                    $.getJSON("getCities?provinceId=" + provinceId, function(data) {
                        $.each(data, function(index, item) {
                            $("#city").append($('<option>', {
                                value: item.id,
                                text: item.name
                            }));
                        });
                    });
                }
            });

            // 城市改变时加载县区数据
            $("#city").change(function() {
                var cityId = $(this).val();
                $("#county").empty().append('<option value="">请选择县区</option>');
                if (cityId) {
                    $.getJSON("getCounties?cityId=" + cityId, function(data) {
                        $.each(data, function(index, item) {
                            $("#county").append($('<option>', {
                                value: item.id,
                                text: item.name
                            }));
                        });
                    });
                }
            });
        });
    </script>
</body>
</html>

后端Java部分（Servlet示例）

@WebServlet("/getProvinces")
public class ProvinceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Province> provinces = ProvinceService.getAllProvinces();
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        new Gson().toJson(provinces, response.getWriter());
    }
}

@WebServlet("/getCities")
public class CityServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int provinceId = Integer.parseInt(request.getParameter("provinceId"));
        List<City> cities = CityService.getCitiesByProvinceId(provinceId);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        new Gson().toJson(cities, response.getWriter());
    }
}

@WebServlet("/getCounties")
public class CountyServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int cityId = Integer.parseInt(request.getParameter("cityId"));
        List<County> counties = CountyService.getCountiesByCityId(cityId);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        new Gson().toJson(counties, response.getWriter());
    }
}