使用ajax实现省市区三级联动基于SSM框架
一、效果图：
项目百度网盘地址：
链接：https://pan.baidu.com/s/1QTQC8ccoYd2pnbMvtwafJg&shfl=sharepset
提取码：7id8
复制这段内容后打开百度网盘手机App，操作更方便哦
二、项目整体结构：
三、JSP页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"${pageContext.request.contextPath}/test/getprovince",
type:"post",
success:function(data){
var province = $("#province")[0];
for(var i = province.options.length-1;i>0;i--){
province.remove(i);
}
$(data).each(function(){
var option = new Option();
option.value = this.id;
option.text = this.name;
province.add(option);
});
},
dataType:"json"
});
});
$(function(){
$("#province").change(function(){
$.ajax({
url:"${pageContext.request.contextPath}/test/getcity",
data:{cityid:$("#province").val()},
type:"post",
success:function(data){
var city = $("#city")[0];
for(var i = city.options.length-1;i>0;i--){
city.remove(i);
}
$(data).each(function(){
var option = new Option();
option.value = this.id;
option.text = this.name;
city.add(option);
});
},
dataType:"json"
});
});
});
$(function(){
$("#city").change(function(){
$.ajax({
url:"${pageContext.request.contextPath}/test/getdistrict",
data:{districtid:$("#city").val()},
type:"post",
success:function(data){
var district = $("#district")[0];
for(var i = district.length-1;i>0;i--){
district.remove(i);
}
$(data).each(function(){
var option = new Option();
option.value = this.id;
option.text = this.name;
district.add(option);
});
},
dataType:"json"
});
});
});
</script>
</head>
<body>
省：<select id="province">
<option value="">请选择</option>
<c:forEach items="${province}" var="p">
<option value="${p.id}">${p.name }</option>
</c:forEach>
</select>
市：<select id="city">
<option value="">请选择</option>
</select>
区：<select id="district">
<option value="">请选择</option>
</select>
</body>
</html>
四、数据库
五、各层代码
pojo
package com.ajax.ld.pojo;
public class Area {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
mapper
package com.ajax.ld.mapper;
import java.util.List;
import java.util.Map;
import com.ajax.ld.pojo.Area;
public interface AreaMapper {
public List<Area> getProvince();
public List<Area> getCity(Map<String,Object> map);
public List<Area> getDistrict(Map<String, Object> map);
}
mapper.xml
<?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.ajax.ld.mapper.AreaMapper">
<resultMap type="Area" id="areaMapper">
<id property="name" column="name"></id>
<result property="name" column="name"></result>
</resultMap>
<select id="getProvince" parameterType="Area" resultType="Area">
select * from area where id like '__0000'
</select>
<select id="getCity" parameterType="Area" resultType="Area">
select * from area where id like #{includeId} and id !=#{excludeId}
</select>
<select id="getDistrict" parameterType="Area" resultType="Area">
select * from area where id like #{includeId} and id !=#{excludeId}
</select>
</mapper>
service
package com.ajax.ld.service;
import java.util.List;
import java.util.Map;
import com.ajax.ld.pojo.Area;
public interface AreaService {
public List<Area> getProvince();
public List<Area> getCity(Map<String,Object> map);
public List<Area> getDistrict(Map<String, Object> map);
}
servicei.mpl
package com.ajax.ld.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ajax.ld.mapper.AreaMapper;
import com.ajax.ld.pojo.Area;
import com.ajax.ld.service.AreaService;
@Service
public class AreaServiceImpl implements AreaService{
@Autowired
private AreaMapper areaMapper;
@Override
public List<Area> getProvince() {
return areaMapper.getProvince();
}
@Override
public List<Area> getCity(Map<String,Object> map) {
return areaMapper.getCity(map);
}
@Override
public List<Area> getDistrict(Map<String, Object> map) {
return areaMapper.getDistrict(map);
}
}
Controller
package com.ajax.ld.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ajax.ld.pojo.Area;
import com.ajax.ld.service.AreaService;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@Controller
@RequestMapping("test")
public class AreaController {
@Autowired
private AreaService areaService;
@RequestMapping("getprovince")
@ResponseBody
public List<Area> Province(Map<String,Object> map) {
List<Area> province = areaService.getProvince();
return province;
}
@RequestMapping("getcity")
@ResponseBody
public List<Area> getCity(String cityid) {
System.out.println(cityid);
Map<String,Object> map = new HashMap<String,Object>();
map.put("includeId", cityid.substring(0,2)+"__00");
map.put("excludeId", cityid);
List<Area> city = areaService.getCity(map);
return city;
}
@RequestMapping("getdistrict")
@ResponseBody
public List<Area> getDistrict(String districtid) {
Map<String,Object> map = new HashMap<String,Object>();
map.put("includeId", districtid.substring(0,4)+"__");
map.put("excludeId", districtid);
List<Area> district = areaService.getDistrict(map);
return district;
}
}
大致就是这些了，谢谢大家看到这里，我很少写博文且java方面也是菜鸟，所以肯定会有不太完善的地方，还请大家多多指教，谢谢啦。
