ssm之地区表三级联动

最新推荐文章于 2021-05-22 16:21:46 发布

mytimelife

最新推荐文章于 2021-05-22 16:21:46 发布

阅读量1.1k

点赞数 3

本文链接：https://blog.csdn.net/mytimelife/article/details/103717654

版权

往

期

回

顾

1.重磅资料，微服务
2.springBoot面试题集锦（含答案）
3.idea的常用设置和快捷键（内含动图）

4.程序员：凭什么他大专12K,而我硕士研究生才5K？2019年世界人工智能大会，大咖们都说了什么

5.Spring Boot实战系列AOP面向切面编程

一、新建数据库
中国所有的省、市、县分别存储在三张表中。
1.省

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `provinceID` int(11) NOT NULL,
  `province` varchar(20) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8;

2.市

CREATE TABLE `city` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `cityID` int(11) NOT NULL,
 `city` varchar(20) NOT NULL,
 `fatherID` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=346 DEFAULT CHARSET=utf8;

3.县

CREATE TABLE `area` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `areaID` int(11) NOT NULL,
 `area` varchar(20) CHARACTER SET gbk NOT NULL,
 `fatherID` int(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3145 DEFAULT CHARSET=utf8;

4.导入数据
二、代码实现
这里就不介绍ssm的整合了，直接三层开始：
1.bean
省

public class Province {

private Integer id;
private String province;
private Integer provinceID;
public Integer getId() {
    return id;
}
public void setId(Integer id) {
    this.id = id;
}
public String getProvince() {
    return province;
}
public void setProvince(String province) {
    this.province = province;
}
public Integer getProvinceID() {
    return provinceID;
}
public void setProvinceID(Integer provinceID) {
    this.provinceID = provinceID;
}

市

public class City {

private Integer id;
private Integer fatherID;
private Integer cityID;
private String city;
public Integer getId() {
    return id;
}
public void setId(Integer id) {
    this.id = id;
}
public Integer getFatherID() {
    return fatherID;
}
public void setFatherID(Integer fatherID) {
    this.fatherID = fatherID;
}
public Integer getCityID() {
    return cityID;
}
public void setCityID(Integer cityID) {
    this.cityID = cityID;
}
public String getCity() {
    return city;
}
public void setCity(String city) {
    this.city = city;
}
@Override
public String toString() {
    return "City [id=" + id + ", fatherID=" + fatherID + ", cityID=" + cityID + ", city=" + city + "]";
}

县

 public class Area {

private Integer id;
private Integer fatherID;
private Integer areaID;
private String area;

public Integer getId() {
    return id;
}
public void setId(Integer id) {
    this.id = id;
}
public Integer getFatherID() {
    return fatherID;
}
public void setFatherID(Integer fatherID) {
    this.fatherID = fatherID;
}
public Integer getAreaID() {
    return areaID;
}
public void setAreaID(Integer areaID) {
    this.areaID = areaID;
}
public String getArea() {
    return area;
}
public void setArea(String area) {
    this.area = area;
}
@Override
public String toString() {
    return "Area [id=" + id + ", fatherID=" + fatherID + ", areaID=" + areaID + ", area=" + area + "]";
}

2.dao层
接口：

public interface AreaDao {

/**
 * 查找所有省份
 */
public List<Province> getProvinces();

/**
 * 查找所有市
 */
public List<City> getCitys(String province);

/**
 * 查找所有县
 * 
 */
public List<Area> getAreas(String city);
}

实现：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.eu.ssm.dao.AreaDao">
<resultMap type="com.eu.ssm.bean.Province" id="BaseResultMap">
    <id column="id" jdbcType="INTEGER" property="id"/>
    <result column="province" jdbcType="VARCHAR" property="province"/>
    <result column="provinceID" jdbcType="INTEGER" property="provinceID"/>
</resultMap>

<resultMap type="com.eu.ssm.bean.City" id="BaseResultMapCity">
    <id column="id" jdbcType="INTEGER" property="id"/>
    <result column="cityID" jdbcType="INTEGER" property="cityID"/>
    <result column="city" jdbcType="VARCHAR" property="city"/>
    <result column="fatherID" jdbcType="INTEGER" property="fatherID"/>
</resultMap>

<resultMap type="com.eu.ssm.bean.Area" id="BaseResultMapArea">
    <id column="id" jdbcType="INTEGER" property="id"/>
    <result column="areaID" jdbcType="INTEGER" property="areaID"/>
    <result column="area" jdbcType="VARCHAR" property="area"/>
    <result column="fatherID" jdbcType="INTEGER" property="fatherID"/>
</resultMap>

<select id="getProvinces" resultMap="BaseResultMap">
    SELECT *FROM province
</select>

<select id="getCitys" resultMap="BaseResultMapCity">
    SELECT * 
    FROM city c
    JOIN province p
    ON c.fatherID=P.provinceID
    WHERE province=#{province}
</select>

<select id="getAreas" resultMap="BaseResultMapArea">
    SELECT *
    FROM area a
    JOIN city c
    ON a.fatherID=c.cityID
    WHERE city=#{city}
</select>

3.service
接口：

public interface AreaService {

List<Province> getProvinces();

List<City> getCity(String province);

List<Area> getArea(String city);

}

实现类：

@Service
public class AreaServiceImpl implements AreaService {

@Autowired
private AreaDao areaDao;

public List<Province> getProvinces() {
    return areaDao.getProvinces();
}

public List<City> getCity(String province) {
    return areaDao.getCitys(province);
}

public List<Area> getArea(String city) {
    return areaDao.getAreas(city);
}

}
4.controller

@Controller
public class AreaController {

@Autowired
private AreaService areaService;

@RequestMapping("/area")
public String toArea() {
    return "area";
}


@RequestMapping("/getProvinces")
public String getProvinces(ModelMap map) {
    List<Province> provinces = areaService.getProvinces();
    map.addAttribute("provinces", provinces);
    return "area";
}

@RequestMapping(value = "/getCity/{pr_name}",method = RequestMethod.GET)
@ResponseBody
public Object getCity(@PathVariable("pr_name")String province) {
    List<City> city = areaService.getCity(province);
    return city;
}

@RequestMapping(value = "/getArea/{ci_name}",method = RequestMethod.GET)
@ResponseBody
public Object getArea(@PathVariable("ci_name")String city) {
    System.out.println(city);
    List<Area> area = areaService.getArea(city);
    for (Area area2 : area) {
        System.out.println(area2);
    }
    return area;
}

5.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.js"></script>
<script type="text/javascript">


  function getCity(){
    var pr_name = $("#province").val();
    console.log(pr_name);
    $("#city").html('<option value="">----请选择城市----</option>');
      $.ajax({
        url : "${pageContext.request.contextPath}/getCity/"+pr_name,
        type : "GET", 
        dataType : "json",
        success : function(data){
          if(data!=null){
             $(data).each(function(index){
            $("#city").append(
                            '<option value="'+data[index].city+'">'+data[index].city+'</option>'
                         );
              });
          }
        }
      });
  } 
  function testJson2(){
     var ci_name = $("#city option:selected").val();  
     $("#county").html('<option value="">--请选择县城--</option>');
      $.ajax({
        url : "${pageContext.request.contextPath }/getArea/"+ci_name,
        type : "GET", 
        dataType : "json",
        success : function(data){
          if(data!=null){
             $(data).each(function(index){
            $("#county").append(
                            '<option value="'+data[index].area+'">'+data[index].area+'</option>'
                         );
              });
          }
        }
      });
  }
</script>
</head>
<body>
    
     <select name="province"  id="province"  onclick="getCity()" >
        <option value="" >------请选择省份-----</option>
          <c:forEach items="${provinces}" var="c1">
        <option value="${c1.province}">${c1.province}</option>    
        </c:forEach>
    </select>
    <select name="city" id="city" onclick="testJson2()">
        <option value="">------请选择城市-----</option>
    </select>
    <select name="county" id="county" >
        <option value="">------请选择县城-----</option>
    </select>
</body>
</html>

6.测试