运行效果:省份信息从数据库中自动遍历,单击省份下的江西,城市信息便自动从数据库中读出,单击城市中的九江,县城信息便从数据库中读出
数据库
jsp层:comovement.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>三级联动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
function testJson1(){
var pr_name = $("#province").val();
$("#city").html('<option value="">----请选择城市----</option>');
$.ajax({
url : "${pageContext.request.contextPath}/testjson1/"+pr_name,
type : "GET",
dataType : "json",
success : function(data){
if(data!=null){
$(data).each(function(index){
$("#city").append(
'<option value="'+data[index].ci_name+'">'+data[index].ci_name+'</option>'
);
});
}
}
});
}
function testJson2(){
var ci_name = $("#city option:selected").val();
$("#county").html('<option value="">--请选择县城--</option>');
$.ajax({
url : "${pageContext.request.contextPath }/testjson2/"+ci_name,
type : "GET",
dataType : "json",
success : function(data){
if(data!=null){
$(data).each(function(index){
$("#county").append(
'<option value="'+data[index].co_name+'">'+data[index].co_name+'</option>'
);
});
}
}
});
}
</script>
</head>
<body>
<select name="province" id="province">
<option value="">------请选择省份-----</option>
<c:forEach items="${province}" var="c1">
<option value="${c1.pr_name}" οnclick="testJson1()">${c1.pr_name}</option>
</c:forEach>
</select>
<select name="city" id="city" οnclick="testJson2()">
<option value="">------请选择城市-----</option>
</select>
<select name="county" id="county" >
<option value="">------请选择县城-----</option>
</select>
</body>
</html>
控制层:ComovementController.java
import java.io.IOException;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.kebo.po.Comovement;
import com.kebo.service.ComovementService;
@Controller
public class ComovementController {
@Autowired
private ComovementService comovementService;
@RequestMapping("findProvince")
public String findProvince(Model model) {
List<Comovement> province=comovementService.findProvince();
model.addAttribute("province",province);
return "comovement";
}
@RequestMapping(value="/testjson1/{pr_name}",method=RequestMethod.GET)
@ResponseBody
public Object testJson1( @PathVariable("pr_name") String pr_name,Model model) throws IOException{
List<Comovement> city=comovementService.findCityByName(pr_name);
return city;
}
@RequestMapping(value="/testjson2/{ci_name}",method=RequestMethod.GET)
@ResponseBody
public Object testJson2(@PathVariable("ci_name") String ci_name,Model model) throws IOException{
List<Comovement> county=comovementService.findCountyByName(ci_name);
return county;
}
}
Dao层:ComovementDao.java
import java.util.List;
import com.kebo.po.Comovement;
public interface ComovementDao {
public List<Comovement> findProvince();
public List<Comovement> findCityByName(String pr_name);
public List<Comovement> findCountyByName(String ci_name);
}
ComovementDao.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.kebo.dao.ComovementDao">
<!--查询出所有的省份信息 -->
<select id="findProvince" resultType="Comovement">
select distinct pr_name from province
</select>
<select id="findCityByName" parameterType="String"
resultType="Comovement">
select distinct ci_name from city,province where ci_belong=pr_id and pr_name=#{pr_name}
</select>
<select id="findCountyByName" parameterType="String" resultType="Comovement">
select distinct co_name from county,city where co_belong=ci_id and ci_name=#{ci_name}
</select>
</mapper>
Service层:ComovementService.java
import java.util.List;
import com.kebo.po.Comovement;
public interface ComovementService {
public List<Comovement> findProvince();
public List<Comovement> findCityByName(String pr_name);
public List<Comovement> findCountyByName(String ci_name);
}
实现层:ComovementServiceImpl.java
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.kebo.dao.ComovementDao;
import com.kebo.po.Comovement;
import com.kebo.service.ComovementService;
@Service
@Transactional
public class ComovementServiceImpl implements ComovementService {
@Autowired
private ComovementDao comovementDao;
@Override
public List<Comovement> findProvince() {
return this.comovementDao.findProvince();
}
@Override
public List<Comovement> findCityByName(String pr_name) {
// TODO Auto-generated method stub
return this.comovementDao.findCityByName(pr_name);
}
@Override
public List<Comovement> findCountyByName(String ci_name) {
// TODO Auto-generated method stub
return this.comovementDao.findCountyByName(ci_name);
}
}
po层:Comovement.java
public class Comovement {
private String pr_name;
private String ci_name;
private String co_name;
public String getPr_name() {
return pr_name;
}
public void setPr_name(String pr_name) {
this.pr_name = pr_name;
}
public String getCi_name() {
return ci_name;
}
public void setCi_name(String ci_name) {
this.ci_name = ci_name;
}
public String getCo_name() {
return co_name;
}
public void setCo_name(String co_name) {
this.co_name = co_name;
}
}
注意:ssm框架下springmvc的拦截器会把jq的配置文件给拦截掉,需要在spring-config.xml文件中
使静态文件不被拦截(例如<mvc:resources location="/js/" mapping="/js/**"/>),除此之外,ssm框架下实现此功能除了需要ssm框架本身的jar包之外,还需要导入json支持包,以及jstl.jar和standard.jar包用于遍历输出省级信息
这是整体的项目图: