国家省市区四级联动

后台模拟数据

package com.ahut.action;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/** *  * @ClassName: FourLevelLinkageAction * @Description: 四级联控制层 * @author cheng * @date 2017年10月20日 下午12:00:19 */@RestController@RequestMapping(value = "/fourLevel")public class FourLevelLinkageAction {    /**     *      * @Title: test     * @Description: 模拟获取所有的国家列表     * @param modelMap     * @return     * @throws Exception     */    @RequestMapping(value = "/getAllCountry")    public Map<String, Object> getAllCountry() throws Exception {        List<Map<String, String>> countryMapList = new ArrayList<>();        Map<String, String> countryMap = new HashMap<>();        countryMap.put("COUNTRY_ID", "1");        countryMap.put("COUNTRY_NAME", "中国");        countryMapList.add(countryMap);        countryMap = new HashMap<>();        countryMap.put("COUNTRY_ID", "2");        countryMap.put("COUNTRY_NAME", "美国");        countryMapList.add(countryMap);        Map<String, Object> returnMap = new HashMap<>();        returnMap.put("countryList", countryMapList);        returnMap.put("httpCode", "200");        returnMap.put("msg", "请求成功");        returnMap.put("timestamp", 1508483805447L);        return returnMap;    }    /**     *      * @Title: getProvinceByCountry     * @Description: 获取对应国家下面的省列表     * @param modelMap     * @return     * @throws Exception     */    @RequestMapping(value = "/getProvinceByCountry")    public Map<String, Object> getProvinceByCountry(String countryId) throws Exception {        System.out.println("countryId:" + countryId);        List<Map<String, String>> provinceMapList = new ArrayList<>();        if ("1".equals(countryId)) {            Map<String, String> provinceMap = new HashMap<>();            provinceMap.put("PROVINCE_ID", "1");            provinceMap.put("PROVINCE_NAME", "安徽省");            provinceMapList.add(provinceMap);            provinceMap = new HashMap<>();            provinceMap.put("PROVINCE_ID", "2");            provinceMap.put("PROVINCE_NAME", "江苏省");            provinceMapList.add(provinceMap);        }        Map<String, Object> returnMap = new HashMap<>();        returnMap.put("provinceList", provinceMapList);        returnMap.put("httpCode", "200");        returnMap.put("msg", "请求成功");        returnMap.put("timestamp", 1508483805447L);        return returnMap;    }    /**     *      * @Title: getCityByProvince     * @Description: 获取对应省下面的市列表     * @param modelMap     * @return     * @throws Exception     */    @RequestMapping(value = "/getCityByProvince")    public Map<String, Object> getCityByProvince(String provinceId) throws Exception {        System.out.println("provinceId:" + provinceId);        List<Map<String, String>> cityMapList = new ArrayList<>();        if ("1".equals(provinceId)) {            Map<String, String> cityMap = new HashMap<>();            cityMap.put("CITY_ID", "1");            cityMap.put("CITY_NAME", "马鞍山市");            cityMapList.add(cityMap);            cityMap = new HashMap<>();            cityMap.put("CITY_ID", "2");            cityMap.put("CITY_NAME", "合肥市");            cityMapList.add(cityMap);        }        Map<String, Object> returnMap = new HashMap<>();        returnMap.put("cityList", cityMapList);        returnMap.put("httpCode", "200");        returnMap.put("msg", "请求成功");        returnMap.put("timestamp", 1508483805447L);        return returnMap;    }    /**     *      * @Title: getDistrictByCity     * @Description: 获取对应市下面的区和县列表     * @param modelMap     * @return     * @throws Exception     */    @RequestMapping(value = "/getDistrictByCity")    public Map<String, Object> getDistrictByCity(String cityId) throws Exception {        System.out.println("cityId:" + cityId);        List<Map<String, String>> districtMapList = new ArrayList<>();        if ("1".equals(cityId)) {            Map<String, String> districtMap = new HashMap<>();            districtMap.put("DISTRICT_ID", "1");            districtMap.put("DISTRICT_NAME", "雨山区");            districtMapList.add(districtMap);            districtMap = new HashMap<>();            districtMap.put("DISTRICT_ID", "2");            districtMap.put("DISTRICT_NAME", "花山区");            districtMapList.add(districtMap);        }        Map<String, Object> returnMap = new HashMap<>();        returnMap.put("districtList", districtMapList);        returnMap.put("httpCode", "200");        returnMap.put("msg", "请求成功");        returnMap.put("timestamp", 1508483805447L);        return returnMap;    }}

国家返回格式：

{    "countryList": [        {            "COUNTRY_ID": "1",            "COUNTRY_NAME": "中国"        }    ],    "httpCode": 200,    "msg": "请求成功",    "timestamp": 1508483805447}

省返回格式：

{    "provinceList": [        {            "PROVINCE_NAME": "北京市",            "PROVINCE_ID": "1"        },        {            "PROVINCE_NAME": "江苏省",            "PROVINCE_ID": "10"        }    ],    "httpCode": 200,    "msg": "请求成功",    "timestamp": 1508484529417}

市返回格式：

{    "cityList": [        {            "CITY_ID": "100",            "CITY_NAME": "蚌埠市"        },        {            "CITY_ID": "101",            "CITY_NAME": "淮南市"        }    ],    "httpCode": 200,    "msg": "请求成功",    "timestamp": 1508484677189}

区返回格式：

{    "districtList": [        {            "DISTRICT_ID": "1000",            "DISTRICT_NAME": "颍东区"        },        {            "DISTRICT_ID": "1001",            "DISTRICT_NAME": "颍泉区"        }    ],    "httpCode": 200,    "msg": "请求成功",    "timestamp": 1508484758664}

前台页面解析

<html><head>    <meta charset="utf-8">    <title>四级联动</title>    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script></head><body>    <!-- 国家下拉框 -->    <select id="countryList">    </select>    <!-- 省下拉框 -->    <select id="provinceList">    </select>    <!-- 市下拉框 -->    <select id="cityList">    </select>    <!-- 区下拉框 -->    <select id="districtList">    </select>    <script>        //请求基础地址        var baseUrl = "http://localhost:8080/";        //初始化        $(function () {            getAllCountry();        })        //获取所有的国家列表        function getAllCountry() {            var countryUrl = baseUrl + "fourLevel/getAllCountry.do";            //获取国家json数据            $.getJSON(countryUrl, function (data) {                //重置国家省市区                resetSelect("country", "province", "city", "district");                if (data.countryList.length != 0) {                    //迭代国家json数据                    $.each(data.countryList, function (index, value) {                        //添加一个下拉选择项                        $("#countryList").append("<option value='" + value.COUNTRY_ID + "'>" + value.COUNTRY_NAME + "</option>");                    })                } else {                    //没有相关国家信息                }            })        }        //依据国家id获取对应的省列表        function getProvinceByCountry(countryId) {            var provinceUrl = baseUrl + "fourLevel/getProvinceByCountry.do";            //获取省json数据            $.getJSON(provinceUrl, { "countryId": countryId }, function (data) {                if (data.provinceList.length != 0) {                    //迭代省json数据                    $.each(data.provinceList, function (index, value) {                        //添加一个下拉选择项                        $("#provinceList").append("<option value='" + value.PROVINCE_ID + "'>" + value.PROVINCE_NAME + "</option>");                    })                } else {                    //没有相关省信息                }            })        }        //依据省id获取对应的市列表        function getCityByProvince(provinceId) {            var cityUrl = baseUrl + "fourLevel/getCityByProvince.do";            //获取市json数据            $.getJSON(cityUrl, { "provinceId": provinceId }, function (data) {                if (data.cityList.length != 0) {                    //迭代市json数据                    $.each(data.cityList, function (index, value) {                        //添加一个下拉选择项                        $("#cityList").append("<option value='" + value.CITY_ID + "'>" + value.CITY_NAME + "</option>");                    })                } else {                    //没有相关市信息                }            })        }        //获取对应市下面的县和区        function getDistrictByCity(cityId) {            var districtUrl = baseUrl + "fourLevel/getDistrictByCity.do";            //获取市json数据            $.getJSON(districtUrl, { "cityId": cityId }, function (data) {                if (data.districtList.length != 0) {                    //迭代县json数据                    $.each(data.districtList, function (index, value) {                        //添加一个下拉选择项                        $("#districtList").append("<option value='" + value.DISTRICT_ID + "'>" + value.DISTRICT_NAME + "</option>");                    })                } else {                    //没有相关县信息                }            })        }        //国家列表下拉框发生改变时        $("#countryList").change(function () {            //重置省市区            resetSelect(null, "province", "city", "district");            //获取下拉框选中项的value属性值            var countryId = $("#countryList").val();            //获取对应国家下面的省列表            getProvinceByCountry(countryId);        })        //省列表下拉框发生改变时        $("#provinceList").change(function () {            //重置市区            resetSelect(null, null, "city", "district");            //获取下拉框选中项的value属性值            var provinceId = $("#provinceList").val();            //获取对应国家下面的省列表            getCityByProvince(provinceId);        })        //市列表下拉框发生改变时        $("#cityList").change(function () {            //重置区            resetSelect(null, null, null, "district");            //获取下拉框选中项的value属性值            var cityId = $("#cityList").val();            //获取对应国家下面的省列表            getDistrictByCity(cityId);        })        //重置国家省市区控件        function resetSelect(country, province, city, district) {            if (country) {                //清除国家列表                resetSelectByLabelId("countryList", "请选择国家");            }            if (province) {                //清除省列表                resetSelectByLabelId("provinceList", "请选择省");            }            if (city) {                //清除市列表                resetSelectByLabelId("cityList", "请选择市");            }            if (district) {                //清除县列表                resetSelectByLabelId("districtList", "请选择县/区");            }        }        //依据标签id重置        function resetSelectByLabelId(labelId, message) {            $("#" + labelId + " option").remove();            $("#" + labelId).append("<option value='-1'>" + message + "</option>");        }        //重置所有控件        function resetAll() {            //初始化            getAllCountry();        }        //获取国家id        function getCountryId() {            return $("#countryList").val();        }        //获取省id        function getProvinceId() {            return $("#provinceList").val();        }        //获取市id        function getCityId() {            return $("#cityList").val();        }        //获取区id        function getDistrictId() {            return $("#districtList").val();        }    </script></body></html>

跨域问题的解决

在springboot的启动类中配置

    /**     * 跨域过滤器     *      * @return     */    @Bean    public CorsFilter corsFilter() {        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", buildConfig()); // 4        return new CorsFilter(source);    }    private CorsConfiguration buildConfig() {        CorsConfiguration corsConfiguration = new CorsConfiguration();        corsConfiguration.addAllowedOrigin("*");        corsConfiguration.addAllowedHeader("*");        corsConfiguration.addAllowedMethod("*");        return corsConfiguration;    }