如何使用SpingMvc实现省市县三级级联？

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);
    }
}

实现效果如下图所示：

如何使用SpingMvc实现省市县三级级联？

SpingMvc实现省市县三级级联

文章目录

猜你喜欢