国家省市区四级联动

后台模拟数据

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;
    }