ajax实现省市县三级级联

最新推荐文章于 2022-04-02 00:21:09 发布

太阳以西.S

最新推荐文章于 2022-04-02 00:21:09 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/whalesharks/article/details/108959393

版权

文章目录

jsp页面（灵活运用传参的数据，通过method使servlet分辨出要执行的方法）

<html>
<head>
    <title>省市三级级联</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            // 省列表
            $.post("/day6/area", {"method": "getProv"}, function (data) {
                if (data.returnCode == 200) {
                    $.each(data.returnData, function (i, d) {
                        var p = "<option value='" + d.areaId + "'>" + d.areaName + "</option>";
                        $("#prov").append(p);
                    });
                }
            }, "json");
            // 市列表
            $("#prov").change(function () {
                $("#city").html("<option>--------请选择--------</option>");
                $("#coun").html("<option>--------请选择--------</option>");
                var provCode = $(this).val();
                $.post("/day6/area", {"method": "getCity", "provCode": provCode}, function (data) {
                    if (data.returnCode == 200) {
                        $.each(data.returnData, function (i, d) {
                            var c = "<option value='" + d.areaId + "'>" + d.areaName + "</option>";
                            $("#city").append(c);
                        });
                    }
                }, "json");
            });
            // 县列表
            $("#city").change(function () {
                $("#coun").html("<option>--------请选择--------</option>");
                var cityCode = $(this).val();
                console.log(cityCode);
                $.post("/day6/area", {"method": "getCoun", "cityCode": cityCode}, function (data) {
                    if (data.returnCode == 200) {
                        $.each(data.returnData, function (i, d) {
                            var coun = "<option value='" + d.areaId + "'>" + d.areaName + "</option>";
                            $("#coun").append(coun);
                        });
                    }
                }, "json");
            });
        })
    </script>
</head>
<body>
<h3>省市级联</h3>
<select id="prov">
    <option>--------请选择--------</option>


</select>
<select id="city">
    <option>--------请选择--------</option>

</select>
<select id="coun">
    <option>--------请选择--------</option>

</select>

</body>
</html>

servlet（即服务接口）

public class AreaServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        Map<String, Object> map = new HashMap<>();
        List<Area> areas = null;
        String method = req.getParameter("method");
        if ("getProv".equals(method)) {
            areas = getProv(req, resp);
        } else if ("getCity".equals(method)) {
            areas = getCity(req, resp);
        } else if ("getCoun".equals(method)){
            areas = getCoun(req, resp);
        }

        if (areas.size() == 0) {
            map.put("returnCode", ReturnCode.ERROR.getCode());
            map.put("returnMsg", ReturnCode.ERROR.getMsg());
        } else {
            map.put("returnCode", ReturnCode.SUCCESS.getCode());
            map.put("returnMsg", ReturnCode.SUCCESS.getMsg());
        }
        map.put("returnData", areas);
        String prov = JSON.toJSONString(map);

        pw.print(prov);
        pw.flush();
        pw.close();
    }

    private List<Area> getProv(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            return new AreaServiceImpl().queryProv();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    private List<Area> getCity(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String provCode = req.getParameter("provCode");
        try {
            return new AreaServiceImpl().queryCity(provCode);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
    private List<Area> getCoun(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String cityCode = req.getParameter("cityCode");
        try {
            return new AreaServiceImpl().queryCoun(cityCode);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
}

状态码的枚举类

public enum ReturnCode {
    SUCCESS("200", "成功"),
    ERROR("404", "失败");

    private String code;
    private String msg;

    private ReturnCode(String code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public String getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

省市县对象实体类

public class Area {

    private String areaId;
    private String areaName;

    @Override
    public String toString() {
        return "Area{" +
                "areaId='" + areaId + '\'' +
                ", areaName='" + areaName + '\'' +
                '}';
    }

    public String getAreaId() {
        return areaId;
    }

    public void setAreaId(String areaId) {
        this.areaId = areaId;
    }

    public String getAreaName() {
        return areaName;
    }

    public void setAreaName(String areaName) {
        this.areaName = areaName;
    }

    public Area(String areaId, String areaName) {
        this.areaId = areaId;
        this.areaName = areaName;
    }
}