SpingMvc实现省市县三级级联
文章目录
一、原理分析
二、搭建项目环境
三、实现省市县三级级联代码及代码分析
一、原理分析
实现的原理:我们要做的就是将mysql中省市县的数据通过sql语句查训到页面出来,并使将查询出来的数据返回 到前端即页面上,通过观察area表的数据发现,如果查询的parent_code为空的的话,查出来的是省,如果parent_code等于省的code的话查出来的是市,如果parent_code等于市的code的时候,查出来的是县、区
如下例所示,我们查询贵州省的市和县
首先使parent-code为空执行如下sql语句,得到贵州省的code
select * from area where parent_code=""
得到的结果如下所示:
让parent_code等于省的code,查出贵州省下的市,sql语句如下
select * from area where parent_code="520000"
得到的结果如下所示:
让parent_code等于市的code,查出贵阳市下的县、区,sql语句如下
select * from area where parent_code="520100"
从上例我们可以的到,如果我们要实现省、市、县的三级级联的话,点击下图选中请选择省,就能有省份的出现,选择相应的省,会触发一个方法,将省的code赋值给parent_code并同时向后台发送一个请求,查询该省对应的市,并将查询到的数据放区回到页面;同理选择相应的市,也会触发一个方法,将市的code赋值给parent_code并同时向后台发送一个请求,查询该市对应的的县、区,并将查询到的数据返回到页面
二、搭建项目环境
SpringMVC的搭建在另一篇文章里有详细的的介绍,这里就不过加的去赘述
文章链接:https://blog.csdn.net/weixin_42867975/article/details/89816877
本次搭建的项目环境如下所示:拷入的jar包目前只拷入基础的jar包,在运行时出错后再拷入相应的jar包
三、实现省市县三级级联代码及代码分析
前端代码
index.jsp
<script>
<!--向AreaController发请求,返回areaList.jsp页面和省份-->
location.href="./area/cascadeView.do";
</script>
areaList.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
pageContext.setAttribute("path",path);
%>
<html>
<head>
<title>Title</title>
<script src="${path}/js/jquery-1.8.3.js"></script>
<script>
<!--选中相应的省份后,获得相应的省的code,赋值给parentCode,通过parentCode得到对应的市,通过循环追加的方式显示值-->
function getCities() {
var parentCode = $("#province option:selected").val();
<!--在省市县都选完了,要重新选择省的时候,清空县里面的数据-->
$("#county").empty();
$("#county").append("<option>--请选择县、区--</option>")
<!--在选择请选择省的时候,清空请选择市里面的数据-->
if(parentCode==""){
$("#city").empty();
$("#city").append("<option>--请选择市--</option>");
return;
}
var object ={
<!--向AreaController发请求-->
url:"${path}/area/cascade.do",
type:"post",
data:"parentCode="+parentCode,
success:function(data){
var options = "<option value=\"\">--请选择市--</option>";
for (var i=0;i<data.length;i++){
var city = data[i];
options = options + "<option value=\""+city.code+"\">"+city.name+"</option>";
console.log(options);
}
$("#city").empty();
$("#city").append(options);
}
};
$.ajax(object);
}
<!--选中相应的市后,获得相应的市的code,赋值给parentCode,向AreaController发请求,通过parentCode得到对应的县区,通过循环追加的方式显示值-->
function getCounties(){
var parentCode = $("#city option:selected").val();
<!--在省市都选择请选择省/市的时候,清空请选择县里面的数据-->
if(parentCode==""){
$("#county").empty();
$("#county").append("<option>--请选择市--</option>");
return;
}
var object ={
url:"${path}/area/cascade.do",
type:"post",
data:"parentCode="+parentCode,
success:function(data){
var options = "<option value=\"\">--请选择县、区--</option>";
for (var i=0;i<data.length;i++){
var county = data[i];
options = options + "<option value=\""+county.code+"\">"+county.name+"</option>";
}
$("#county").empty();
$("#county").append(options);
}
};
$.ajax(object);
}
</script>
</head>
<body>
<select onchange="getCities() " id="province" >
<option value="">--请选择省--</option>
<!--执行此操作是为了让页面加载出来的时候,数据就已经有,提高用户体验-->
<c:forEach var="province" items="${provinces}">
<option value="${province.code}">${province.name}</option>
</c:forEach>
</select>
<select onchange="getCounties()" id="city">
<option value="">--请选择市--</option>
</select>
<select id="county">
<option value="">--请选择县、区--</option>
</select>
</body>
</html>
后端代码
AreaController
@Controller
@RequestMapping("/area")
public class AreaController {
@Autowired
private IAreaService areaService;
/**
* 处理得到areaList页面和省份数据的请求
*/
@RequestMapping("/cascadeView.do")
public String cascadeView(Map<String,Object> map){
map.put("provinces",areaService.cascade(null));
return "area/areaList";
}
/**
* 处理得到市、县(区)数据的请求
*/
@RequestMapping("/cascade.do")
@ResponseBody
public List<Area> cascade(String parentCode, Map<String,Object> map){
return areaService.cascade(parentCode);
}
}
service层
IAreaService
public interface IAreaService {
List<Area> cascade(String parentCode);
}
AreaService
@Service
public class AreaService implements IAreaService {
@Autowired
private IAreaDao areaDao;
public List<Area> cascade(String parentCode){
parentCode=parentCode==null?"":parentCode;
return areaDao.cascade(parentCode);
}
}
Dao层
IAreaDao
public interface IAreaDao {
List<Area> cascade(String parentCode);
}
AreaDao
@Repository
public class AreaDao implements IAreaDao{
@Autowired
private JdbcTemplate jdbcTemplate;
public List<Area> cascade(String parentCode){
String sql = "select * from area where parent_code=?";
return jdbcTemplate.query(sql, new RowMapper<Area>() {
@Override
public Area mapRow(ResultSet rs, int i) throws SQLException {
return new Area(rs.getString("id"),rs.getString("name"),rs.getString("code"),rs.getString("parent_code"));
}
},parentCode);
}
}
实现效果如下图所示: