实现三级联动的基本思路是通过
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 provinceList = JSON.parse(data);
var html = "";
for(var i=0; i<provinceList.length; i++){
html += "<option value='"+provinceList[i].id+"'>"+provinceList[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 districtList = JSON.parse(data);
var html = "";
for(var i=0; i<districtList.length; i++){
html += "<option value='"+districtList[i].id+"'>"+districtList[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 getProvinceList(){
List<Province> provinceList = regionService.getProvinceList();
return JSON.toJSONString(provinceList);
}
@RequestMapping(value="/city/{provinceId}", method=RequestMethod.GET)
@ResponseBody
public String getCityList(@PathVariable("provinceId") String provinceId){
List<City> cityList = regionService.getCityList(provinceId);
return JSON.toJSONString(cityList);
}
@RequestMapping(value="/district/{cityId}", method=RequestMethod.GET)
@ResponseBody
public String getDistrictList(@PathVariable("cityId") String cityId){
List<District> districtList = regionService.getDistrictList(cityId);
return JSON.toJSONString(districtList);
}
}
```
3. Service层代码
```java
@Service
public class RegionServiceImpl implements RegionService {
@Autowired
private RegionDao regionDao;
@Override
public List<Province> getProvinceList() {
return regionDao.getProvinceList();
}
@Override
public List<City> getCityList(String provinceId) {
return regionDao.getCityList(provinceId);
}
@Override
public List<District> getDistrictList(String cityId) {
return regionDao.getDistrictList(cityId);
}
}
```
4. DAO层代码
```java
@Repository
public class RegionDaoImpl implements RegionDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public List<Province> getProvinceList() {
String sql = "
select province_id, province_name from tb_province";
List<Province> provinceList = jdbcTemplate.query(sql, new BeanPropertyRowMapper<Province>(Province.class));
return provinceList;
}
@Override
public List<City> getCityList(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> getDistrictList(String cityId) {
String sql = "
select district_id, district_name from tb_district where city_id=?";
List<District> districtList = jdbcTemplate.query(sql, new Object[]{cityId}, new BeanPropertyRowMapper<District>(District.class));
return districtList;
}
}
```
其中Province、City和District是
数据实体类，包含id和name两个属性。以上代码只是一个简单示例，实际项目中需要根据具体需求进行修改和完善。
最低0.47元/天 解锁文章
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
