ssm框架下实现省市县三级联动

运行效果：省份信息从数据库中自动遍历，单击省份下的江西，城市信息便自动从数据库中读出，单击城市中的九江，县城信息便从数据库中读出

数据库

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}" onclick="testJson1()">${c1.pr_name}</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>

控制层：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包用于遍历输出省级信息

这是整体的项目图：

ssm框架下实现省市县三级联动

猜你喜欢