基于mybatis实现省市县三级联动

最新推荐文章于 2022-11-23 16:38:19 发布

jiluoluoa

最新推荐文章于 2022-11-23 16:38:19 发布

阅读量524

点赞数

分类专栏： myBatis 文章标签： java 开发语言

本文链接：https://blog.csdn.net/jiluoluoa/article/details/123410118

版权

myBatis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：省市县首先只展示出来省，用户选择省份后，出现对应的市，选择城市后，展示对应的县/区

分析：

1.界面上首先展示出省，可以用监听器初始化数据就获得对应的省份

2.点击省份获得市对应的可以用异步传输即ajax

3.只有当用户选择才会将数据传回后端调用数据，否则不发出申请

初始化数据：InitializeListener

import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

import com.oracle.pojo.Provinces;
import com.oracle.service.ProvincesService;

import jdk.nashorn.internal.ir.RuntimeNode.Request;
@WebListener
public class InitializeListener  implements ServletContextListener{
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        ServletContext servletContext = sce.getServletContext();
        servletContext.setAttribute("root",servletContext.getContextPath());
        servletContext.setAttribute("js",servletContext.getContextPath()+"/js");
        //调用所有的
        ProvincesService ps=new ProvincesService();
        List<Provinces> proList = ps.findAllProvinces();
        //数据保存在servletContext中
        servletContext.setAttribute("proList",proList);
       
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {
       
    }
}

index.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>三级联动</title>
<script type="text/javascript" src="${js}/jquery.min.js"></script>
<script type="text/javascript">

	
	$(function () {
		$("#city").change(function () {
			var cityid=$("#city").val();
			if(cityid==0){
				return;
			}else{
				alert(cityid);
				
				var url="${root}/addressCity";
				$.ajax({
					type:'get',
					url:url,
					data:{"cityid":cityid},
					dataType:"json",
					success:function (data){
						console.log(data.length)
						var result = "<option >请选择县/区</option>";
	                   
	                    for(var i=0;i<data.length;i++){
	                    	result +="<option value='"+data[i].areaid+"'>"+data[i].area+"</option>";
	              
	                    }
	                    $("#areas").html('');
	                    $("#areas").append(result);

					},
					
				})
			}
			
		})
	
	
	$("#provinces").change(function () {
			var provinceid=$("#provinces").val();
			if(provinceid==0){
				return;
			}else{
				alert(provinceid);
				var url="${root}/address";
				$.ajax({
					type:"get",
					url:url,
					data:{"provinceid":provinceid},
					dataType:"json",
					success:function (data){
						//console.log(data.length);
						var result = "<option value='0'>请选择城市</option>";
	                   for(var i=0;i<data.length;i++){
	                    	result +="<option value='"+data[i].cityid+"'>"+data[i].city+"</option>"; 
	                    	
	                    } 
	                    $("#city").html('');
	                    $("#city").append(result);

					},
					
			})
			}
			
	})
	})
</script>
</head>
<body>
<form action="${root}/address" method="post">

省份：<select name="provinces" id="provinces" >
	<option value="0">请选择省份</option>
	<c:forEach items="${proList}" var="pro">
	<option value="${pro.provinceid}">${pro.province}</option>
	</c:forEach>
</select>

城市<select id="city" name="city">
<option value="0">请选择城市</option>

</select>
县/区<select id="areas" name="areas">
<option value="0">请选择县/区</option>

</select>
</form>
</body>
</html>

AddressCityServlet.java

@WebServlet(urlPatterns="/address")
public class AddressServlet extends HttpServlet{

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获得前端页面的provinceid
		String provinceid = req.getParameter("provinceid");
		//调用方法
		CitiesService cs=new CitiesService();
		List<Cities> citiesList = cs.findCitiesByProvinceid(provinceid);
		System.out.println("citiesList"+citiesList);
		JSONArray jsonArray=JSONArray.fromObject(citiesList);
		resp.setCharacterEncoding("utf-8");
		PrintWriter out=resp.getWriter();
		out.print(jsonArray);
		out.flush();
		out.close();
	}

AddressCityServlet.java

@WebServlet(urlPatterns="/addressCity")
public class AddressCityServlet extends HttpServlet{

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//获得城市Id
		String cityid = req.getParameter("cityid");
		//调用方法
		AreasService as=new AreasService();
		List<Areas> areaList = as.findAreaAllBycityid(cityid);
		System.out.println("areaList"+areaList);
		JSONArray jsonArray = JSONArray.fromObject(areaList);
		//以响应的形式传递给前端页面
        PrintWriter out = resp.getWriter();
        out.println( jsonArray );
        out.flush();
        out.close();
	}
}

service层和mapper层代码就不写啦，是很常见的方法，希望会有所帮助，如果发现错误的地方欢迎指出