这段代码展示了如何通过JavaScript实现三级联动效果，从省份到城市再到区县，用于前端地理信息的选择。通过AJAX异步请求获取数据，并动态填充到下拉菜单中。涉及到的技术包括jQuery、Ajax和SpringMVC的控制器方法。
initProvinces();
});/**
* 获取省列表*/function initProvinces() {
$('#province').empty();
$.ajax({
type :"POST",
url : basePath+ "district/getProvinces.do",
success : function(data) {
$.each(data, function(i, it) {
$(""
+ it.name + "
").click(function() {
initCities(it.id);
}).appendTo($('#province'));
});
}
});
}/**
* 获取市列表*/function initCities(provinceID) {
$('#city').empty();
$.ajax({
type :"POST",
url : basePath+ "district/getCities.do?province=" +provinceID,
success : function(data) {
$.each(data, function(i, it) {
$(""
+ it.name + "
").click(function() {
initCounties(it.id);
}).appendTo($('#province'));
});
}
});
}/**
* 获取区县列表*/function initCounties(cityID) {
$('#county').empty();
$.ajax({
type :"POST",
url : basePath+ "district/getCounties.do?city=" +cityID,
success : function(data) {
$.each(data, function(i, it) {
$(""
+ it.name + "
")
.appendTo($('#province'));
});
}
});
}//……
---省------市---
---区---
spring MVC 代码：
@Controller
@RequestMapping(value= "/district")public classdistrictController {
@ResourceprivateDistrictService districtService;/**
* 获取省列表
* @return
* @throws Exception*/@RequestMapping(value= "getProvinces")
@ResponseBodypublicObject getProvinces() throws Exception {returndistrictService.getProvinces();
}/**
* 获取市列表
* @param province
* @return
* @throws Exception*/@RequestMapping(value= "getCities")
@ResponseBodypublic Object getCities(@RequestParam(value = "province") String province) throws Exception {returndistrictService.getCities();
}//再往下级的获取方式和getCities方法都相同，所以此处略过
}
1389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
