地址管理之省市区三级联动菜单
地址管理之省市区三级联动菜单
三级联动表单
三级联动表单
导入省市区的数据
- 下载sql语句的文件
- 在数据库中执行：
source 文件路径即可导入 - 导入成功之后，在数据库中会出现三张表，分别代表省,市,区
创建实体类
get，set方法hashCode和equals方法- 实现序列化接口，生成安全码
Province
/**
* 省的实体类
* @author chenjiabing
*/
public class Province implements Serializable {
private static final long serialVersionUID = -4983640220555245518L;
private Integer id; //主键
private String provinceCode; //编号
private String provinceName; //名称
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getProvinceCode() {
return provinceCode;
}
public void setProvinceCode(String provinceCode) {
this.provinceCode = provinceCode;
}
public String getProvinceName() {
return provinceName;
}
public void setProvinceName(String provinceName) {
this.provinceName = provinceName;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((id == null) ? 0 : id.hashCode());
result = prime * result
+ ((provinceCode == null) ? 0 : provinceCode.hashCode());
result = prime * result
+ ((provinceName == null) ? 0 : provinceName.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Province other = (Province) obj;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
if (provinceCode == null) {
if (other.provinceCode != null)
return false;
} else if (!provinceCode.equals(other.provinceCode))
return false;
if (provinceName == null) {
if (other.provinceName != null)
return false;
} else if (!provinceName.equals(other.provinceName))
return false;
return true;
}
@Override
public String toString() {
return "Province [id=" + id + ", provinceCode=" + provinceCode
+ ", provinceName=" + provinceName + "]";
}
}City
/**
* 城市的实体类
* @author chenjiabing
*/
public class City implements Serializable {
private static final long serialVersionUID = -6530707564192968718L;
private Integer id; //主键
private String provinceCode; //省的编号
private String cityCode; //编号
private String CityName; //名称
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getProvinceCode() {
return provinceCode;
}
public void setProvinceCode(String provinceCode) {
this.provinceCode = provinceCode;
}
public String getCityCode() {
return cityCode;
}
public void setCityCode(String cityCode) {
this.cityCode = cityCode;
}
public String getCityName() {
return CityName;
}
public void setCityName(String cityName) {
CityName = cityName;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result
+ ((CityName == null) ? 0 : CityName.hashCode());
result = prime * result
+ ((cityCode == null) ? 0 : cityCode.hashCode());
result = prime * result + ((id == null) ? 0 : id.hashCode());
result = prime * result
+ ((provinceCode == null) ? 0 : provinceCode.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
City other = (City) obj;
if (CityName == null) {
if (other.CityName != null)
return false;
} else if (!CityName.equals(other.CityName))
return false;
if (cityCode == null) {
if (other.cityCode != null)
return false;
} else if (!cityCode.equals(other.cityCode))
return false;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
if (provinceCode == null) {
if (other.provinceCode != null)
return false;
} else if (!provinceCode.equals(other.provinceCode))
return false;
return true;
}
@Override
public String toString() {
return "City [id=" + id + ", provinceCode=" + provinceCode
+ ", cityCode=" + cityCode + ", CityName=" + CityName + "]";
}
}Area
/**
* 区/县的实体类
* @author chenjiabing
*/
public class Area implements Serializable {
private static final long serialVersionUID = -7024097434624454416L;
private Integer id; //主键
private String areaCode; //编号
private String cityCode; //城市的编号
private String areaName; //名称
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAreaCode() {
return areaCode;
}
public void setAreaCode(String areaCode) {
this.areaCode = areaCode;
}
public String getCityCode() {
return cityCode;
}
public void setCityCode(String cityCode) {
this.cityCode = cityCode;
}
public String getAreaName() {
return areaName;
}
public void setAreaName(String areaName) {
this.areaName = areaName;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result
+ ((areaCode == null) ? 0 : areaCode.hashCode());
result = prime * result
+ ((areaName == null) ? 0 : areaName.hashCode());
result = prime * result
+ ((cityCode == null) ? 0 : cityCode.hashCode());
result = prime * result + ((id == null) ? 0 : id.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Area other = (Area) obj;
if (areaCode == null) {
if (other.areaCode != null)
return false;
} else if (!areaCode.equals(other.areaCode))
return false;
if (areaName == null) {
if (other.areaName != null)
return false;
} else if (!areaName.equals(other.areaName))
return false;
if (cityCode == null) {
if (other.cityCode != null)
return false;
} else if (!cityCode.equals(other.cityCode))
return false;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
return true;
}
@Override
public String toString() {
return "Area [id=" + id + ", areaCode=" + areaCode + ", cityCode="
+ cityCode + ", areaName=" + areaName + "]";
}
}持久层
功能分析
- 获取获取所有的省份信息
- 根据选择的省份传回的
省份编号查询所有的城市信息 - 根据选择的城市传回的
城市编码查询所有的县区的信息
新建DictMapper接口
- 完成上面的三个功能，因此需要定义三个方法
/**
* 省市区的接口
* @author chenjiabing
*/
public interface DictMapper {
/**
* 查询所有的省份
* @return 省份集合
*/
List<Province> selectProvince();
/**
*
* @param provinceCode
* @return
*/
List<City> selectCityByProvinceCode(String provinceCode);
/**
* 根据城市的编码查询所有的县区
* @param cityCode
* @return
*/
List<Area> selectAreaByCityCode(String cityCode);
}在src/resource/main的mappers文件夹创建DictMapper.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"
"http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<!-- namespace指定的DictMapper接口的全类名 -->
<mapper namespace="cn.tedu.store.mapper.DictMapper">
<!--
List<Province> selectProvince();
查询所有的省份
-->
<select id="selectProvince" resultType="cn.tedu.store.bean.Province">
select id,
province_code as provinceCode,
province_name as provinceName
from t_dict_provinces
</select>
<!--
List<City> selectCityByProvinceCode(String provinceCode);
根据省份的编码查询所有的城市信息
-->
<select id="selectCityByProvinceCode" resultType="cn.tedu.store.bean.City">
select id,
province_code as provinceCode,
city_code as cityCode,
city_name as cityName
from t_dict_cities where province_code=#{province_code}
</select>
<!--
List<Area> selectAreaByCityCode(String cityCode);
根据城市的编码查询所有的县区
-->
<select id="selectAreaByCityCode" resultType="cn.tedu.store.bean.Area">
select id,
area_code as areaCode,
area_name as areaName,
city_code as cityCode
from t_dict_areas where city_code=#{cityCode}
</select>
</mapper>业务层
功能分析
- 获取获取所有的省份信息
- 根据选择的省份传回的
省份编号获取所有的城市信息 - 根据选择的城市传回的
城市编码获取所有的县区的信息
在cn.tedu.store.service中新建IDictService接口
/**
* 省市区的业务接口
* @author chenjiabing
*/
public interface IDictService {
/**
* 获取所有的省份信息，返回对象集合
* @return Province对象集合
*/
List<Province> getProvinces();
/**
* 根据省份的编码获取所有的城市信息
* @param provinceCode 省份的编码
* @return 所有的城市的集合
*/
List<City> getCities(String provinceCode);
/**
* 根据城市的编码获取所有的县区的信息
* @param cityCode 城市的编码
* @return 所有县区的集合
*/
List<Area> getAreas(String cityCode);
}在cn.tedu.store.service中新建DictServiceImpl实现类
- 使用
@service注解来控制反转，新建对象
/**
* 省市区的业务实现类
* @author chenjiabing
*/
@Service //控制反转，创建对象
public class DictServiceImpl implements IDictService {
@Resource //自动注入对象
private DictMapper dictMapper;
public List<Province> getProvinces() {
return dictMapper.selectProvince();
}
/**
* 获取所有的城市信息
*/
public List<City> getCities(String provinceCode) {
return dictMapper.selectCityByProvinceCode(provinceCode);
}
/**
* 获取所有的县区信息
*/
public List<Area> getAreas(String cityCode) {
return dictMapper.selectAreaByCityCode(cityCode);
}
}控制层
功能分析
- 获取所有的省份信息(省份下拉选择文本改变发出异步请求)
/dict/getProvince.do- 请求方式：
GET - 响应方式：
@ResponseBody
- 获取对应的城市信息
/dict/getCities.do- 请求方式：
GET - 请求参数：
ProvinceCode：省份编码 - 响应方式：
@ResponseBody
- 获取对应的县区信息
/dict/getArea.do- 请求方式：
GET - 请求参数：
cityCode：城市编码 - 响应方式：
@ResponseBody
在cn.tedu.store.controller中新建一个DictController类
- 使用
@Controller注解 - 使用
@RequestMapping
/**
* 省市区的controller层
* 继承父类BaseController
* @author chenjiabing
*/
@Controller
@RequestMapping("/dict")
public class DictController extends BaseController {
@Resource
private IDictService dictService; //自动创建service对象
/**
* 异步获取所有的省份信息，返回给页面
* @return 结果集，省份信息
*/
@RequestMapping("/getProvince.do")
@ResponseBody
public ResponseResult<List<Province>> getProvince(){
//创建结果集对象
ResponseResult<List<Province>> result=new ResponseResult<List<Province>>();
List<Province> provinces=dictService.getProvinces();
result.setState(1); //设置响应码
result.setMessage("响应成功");
result.setData(provinces); //添加返回的数据
return result;
}
/**
* 获取城市信息
* @param provinceCode 省份的编码
* @return 返回结果集
*/
@RequestMapping("/getCity.do")
@ResponseBody
public ResponseResult<List<City>> getCity(String provinceCode){
ResponseResult<List<City>> result=new ResponseResult<List<City>>(); //创建结果集对象
List<City> cities=dictService.getCities(provinceCode); //获取城市信息
result.setData(cities); //将城市信息封装到结果集中
return result;
}
/**
* 异步获取所有县区的信息
* @param cityCode 城市编码
* @return 结果集，其中封装了县区的信息
*/
@RequestMapping("/getArea.do")
@ResponseBody
public ResponseResult<List<Area>> getAreas(String cityCode){
ResponseResult<List<Area>> result=new ResponseResult<List<Area>>();
List<Area> areas=dictService.getAreas(cityCode);
result.setData(areas);
return result;
}
}JSP页面
功能分析
- 当页面加载的时候调用
getProvinces()方法，发送异步请求，这样所有的省份信息都加载出来了 - 当
省份信息的下拉列表select选择改变了,那么调用getCities()方法，这样对应省份的市就加载出来了onchange=getCities()
- 当
市的下拉列表select选择改变了，那么调用getAreas()方法，这样对应的县区就加载出来了onchange=getAreas()
实现
$(function(){
getProvinces(); //页面加载完成之后就调用该方法获取所有的省份信息
})
//获取所有的省份信息
function getProvinces(){
var url="<%=request.getContextPath()%>/dict/getProvince.do"; //异步请求的url
//发出异步请求
$.get(url,function(data,status,xhr){
if(status=="success"){
for(var i=0;i<data.data.length;i++){
var option="<option value="+data.data[i].provinceCode+">"+data.data[i].provinceName+"</option>";
$("#receiverState").append(option);
}
}
});
}
//获取所有的城市信息
function getCities(){
var provinceCode=$("#receiverState").val(); //请求的数据
var url="<%=request.getContextPath()%>/dict/getCity.do?provinceCode="+provinceCode; //异步请求的url
$("#receiverCity").html("<option value='-1'>-------请选择城市---------</option>");
//如果其中的provinceCode==-1，表示选择了请选择省份的那个选项，此时就不许需要发出异步请求了
if(provinceCode==-1){
return;
}
//发送异步请求
$.get(url,function(data,status,xhr){
if(status=="success"){
for(var i=0;i<data.data.length;i++){
//新建option节点，第一个是文本的值，第二个是value属性的值
var option=new Option(data.data[i].cityName,data.data[i].cityCode);
$("#receiverCity").append(option);
}
}
})
}
//获取所有县区的异步请求
function getAreas(){
var cityCode=$("#receiverCity").val(); //请求的数据
var url="<%=request.getContextPath()%>/dict/getArea.do?cityCode="+cityCode; // 异步请求的url
$("#receiverDistrict").html("<option value='-1'>-------请选择县区---------</option>");
//如果其中的cityCode==-1，表示选择了请选择省份的那个选项，此时就不许需要发出异步请求了
if(cityCode==-1){
return;
}
//发送异步请求
$.get(url,function(data,status,xhr){
if(status=="success"){
for(var i=0;i<data.data.length;i++){
//新建option节点，第一个是文本的值，第二个是value属性的值
var option=new Option(data.data[i].areaName,data.data[i].areaCode);
$("#receiverDistrict").append(option);
}
}
})
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-05-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
