实现三级联动的基本思路是通过
Ajax技术实现异步请求后端数据，然后动态生成页面元素实现级联效果。下面是一个Spring MVC+JSP实现三级联动的示例代码：
1. 前端JSP页面
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 加载省份列表
$.
ajax({
url: "${pageContext.request.contextPath}/province",
type: "GET",
success: function(data){
var province
List = JSON.parse(data);
var html = "";
for(var i=0; i<province
List.length; i++){
html += "<option value='"+province
List[i].id+"'>"+province
List[i].name+"</option>";
}
$("#province").html(html);
}
});
// 根据省份id加载城市列表
$("#province").change(function(){
var provinceId = $(this).val();
$.
ajax({
url: "${pageContext.request.contextPath}/
city/"+provinceId,
type: "GET",
success: function(data){
var
cityList = JSON.parse(data);
var html = "";
for(var i=0; i<
cityList.length; i++){
html += "<option value='"+
cityList[i].id+"'>"+
cityList[i].name+"</option>";
}
$("#
city").html(html);
}
});
});
// 根据城市id加载区县列表
$("#
city").change(function(){
var
cityId = $(this).val();
$.
ajax({
url: "${pageContext.request.contextPath}/district/"+
cityId,
type: "GET",
success: function(data){
var district
List = JSON.parse(data);
var html = "";
for(var i=0; i<district
List.length; i++){
html += "<option value='"+district
List[i].id+"'>"+district
List[i].name+"</option>";
}
$("#district").html(html);
}
});
});
});
</script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="
city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
</body>
</html>
```
2. 后端Controller代码
```java
@Controller
public class RegionController {
@Autowired
private RegionService regionService;
@RequestMapping(value="/province", method=RequestMethod.GET)
@ResponseBody
public String getProvince
List(){
List<Province> province
List = regionService.getProvince
List();
return JSON.toJSONString(province
List);
}
@RequestMapping(value="/
city/{provinceId}", method=RequestMethod.GET)
@ResponseBody
public String get
CityList(@PathVariable("provinceId") String provinceId){
List<
City>
cityList = regionService.get
CityList(provinceId);
return JSON.toJSONString(
cityList);
}
@RequestMapping(value="/district/{
cityId}", method=RequestMethod.GET)
@ResponseBody
public String getDistrict
List(@PathVariable("
cityId") String
cityId){
List<District> district
List = regionService.getDistrict
List(
cityId);
return JSON.toJSONString(district
List);
}
}
```
3. Service层代码
```java
@Service
public class RegionServiceImpl implements RegionService {
@Autowired
private RegionDao regionDao;
@Override
public
List<Province> getProvince
List() {
return regionDao.getProvince
List();
}
@Override
public
List<
City> get
CityList(String provinceId) {
return regionDao.get
CityList(provinceId);
}
@Override
public
List<District> getDistrict
List(String
cityId) {
return regionDao.getDistrict
List(
cityId);
}
}
```
4. DAO层代码
```java
@Repository
public class RegionDaoImpl implements RegionDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public
List<Province> getProvince
List() {
String sql = "select province_id, province_name from tb_province";
List<Province> province
List = jdbcTemplate.query(sql, new BeanPropertyRowMapper<Province>(Province.class));
return province
List;
}
@Override
public
List<
City> get
CityList(String provinceId) {
String sql = "select
city_id,
city_name from tb_
city where province_id=?";
List<
City>
cityList = jdbcTemplate.query(sql, new Object[]{provinceId}, new BeanPropertyRowMapper<
City>(
City.class));
return
cityList;
}
@Override
public
List<District> getDistrict
List(String
cityId) {
String sql = "select district_id, district_name from tb_district where
city_id=?";
List<District> district
List = jdbcTemplate.query(sql, new Object[]{
cityId}, new BeanPropertyRowMapper<District>(District.class));
return district
List;
}
}
```
其中Province、
City和District是数据实体类，包含id和name两个属性。以上代码只是一个简单示例，实际项目中需要根据具体需求进行修改和完善。
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
