springboot省市联动前后端实现

省市联动实现大部分都是前端实现的，通过后端实现的情况不多，这里单独写一篇。
环境：前端bootstrap，js，springboot
定义省是1级，市2级。
html：

<div >
                        <from  action="">
                            <div class="row">
                                <div class="col-lg-1 text-center">
                                   省
                                </div>
                                <div class="col-lg-3">
                                    <select class="form-control" id="Province">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="col-lg-1 text-center">
                                   市
                                </div>
                                <div class="col-lg-3">
                                    <select class="form-control" id="City">
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="row text-center" style="margin-left: 50%">
                                <input type="submit" value="查询" id="quaryRenewalOrder">
                                <input type="reset" value="重置" id="refreshRenewal">
                            </div>
                        </from>
                    </div>

js

$(function () {


    //默认绑定省
    ProviceBind();
    //绑定事件
    $("#Province").change( function () {
        CityBind();
    })

    /*$("#City").change(function () {
        VillageBind();
    })*/




})

var patch=$("#patch").html();
function Bind(str) {
    alert($("#Province").html());
    $("#Province").val(str);


}
function ProviceBind() {
    //清空下拉数据
    $("#Province").html("");




    var str = "<option>==请选择===</option>";
    $.ajax({
        type: "POST",
        url: patch+"GetAddress",
        //data: { "parentiD": "", "MyColums": "Province" },
        dataType: "JSON",
        async: false,
        data: {
            parentiD:"",
            MyColums:'1'
        },
        success : function(result) {
            //error为机构有问题的用户
            //从服务器获取数据进行绑定
            $.each(result.icnNoAreas, function (i, item) {
                str += "<option value=" + item.areaCode + ">" + item.areaName + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#Province").append(str);
        },
        error: function () {
            $.DialogByZ.Alert({Title: "提示", Content: "Error!",BtnL:"确定",FunL:alerts});
        }
    });




}
function CityBind() {


    var provice = $("#Province").attr("value");
    //判断省份这个下拉框选中的值是否为空
    if (provice == "") {
        return;
    }
    $("#City").html("");
    var str = "<option></option>";


    $.ajax({
        type: "POST",
        url: patch+"GetAddress",
        //data: { "parentiD": provice, "MyColums": "City" },
        dataType: "JSON",
        async: false,
        data: {
            parentiD:provice,
            MyColums:'2'
        },
        success : function(result) {
            //error为机构有问题的用户
            //从服务器获取数据进行绑定
            $.each(result.baseCarInfos, function (i, item) {
               str += "<option value=" + item.areaCode + ">" + item.areaName + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#City").append(str);
        },
        error: function () {
            $.DialogByZ.Alert({Title: "提示", Content: "Error!",BtnL:"确定",FunL:alerts});
        }
    });


}
/*
function VillageBind() {


    var provice = $("#City").attr("value");
    //判断市这个下拉框选中的值是否为空
    if (provice == "") {
        return;
    }
    $("#Village").html("");
    var str = "<option></option>";
    //将市的ID拿到数据库进行查询，查询出他的下级进行绑定
    $.ajax({
        type: "POST",
        url: patch+"GetAddress",
        data: { "parentiD": provice, "MyColums": "Village" },
        dataType: "JSON",
        async: false,
        success: function (data) {
            //从服务器获取数据进行绑定
            $.each(data.Data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#Village").append(str);
        },
        error: function () { alert("Error"); }
    });
    //$.post("GetAddress", { parentiD: provice, MyColums: "Village" }, function (data) {
    //    $.each(data.Data, function (i, item) {
    //        str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
    //    })
    //    $("#Village").append(str);
    //})
}*/

后端：

/**
     * 查询地址信息
     * @param map
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "GetAddress", method = RequestMethod.POST)
    public Map<String, Object> getAddress(@RequestParam Map<String, Object> map) {
        String clevel = (String) map.get("clevel");
        List<IcnNoArea> icnNoAreas= icnNoAreaService.findByClevel(clevel);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("icnNoAreas", icnNoAreas);
        return result;
    }