后台模拟数据
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
@RestController
@RequestMapping(value = "/fourLevel")
public class FourLevelLinkageAction
/**
*
* @Title: test
* @Description: 模拟获取所有的国家列表
* @param modelMap
* @return
* @throws
@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
@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
@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
@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
国家返回格式：
{
"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
