省市县三级级联（模块化开发）

最新推荐文章于 2020-09-09 10:20:56 发布

不动声色的小蜗牛

最新推荐文章于 2020-09-09 10:20:56 发布

阅读量281

点赞数 1

分类专栏：模块化开发文章标签： json ajax

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107614285

版权

模块化开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

不废话，上代码：

先看一下项目列表：
在这里插入图片描述

tool包里的代码：

请看：tool包

vo.Area类：

package com.jd.vo;

public class Area {

	private String id;
	private String name;
	private String code;
	private String parentCode;
	
	
	public Area(String id, String name, String code, String parentCode) {
		this.id = id;
		this.name = name;
		this.code = code;
		this.parentCode = parentCode;
	}
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getParentCode() {
		return parentCode;
	}
	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}

	@Override
	public String toString() {
		return "Area [id=" + id + ", name=" + name + ", code=" + code + ", parentCode=" + parentCode + "]";
	}	
}

imp中的接口：

IAreaService接口：

package com.jd.area.imp;

import java.util.List;

import com.jd.vo.Area;

public interface IAreaService {

	List<Area> select(String parentCode);
}

IAreaDao接口：

package com.jd.area.imp;

import java.util.List;

import com.jd.vo.Area;

public interface IAreaDao {

	List<Area> select(String parentCode);
}

service包：

AreaService类：

package com.jd.area.service;

import java.util.List;

import com.jd.area.dao.AreaDao;
import com.jd.area.imp.IAreaDao;
import com.jd.area.imp.IAreaService;
import com.jd.vo.Area;

public class AreaService implements IAreaService {

	private IAreaDao areaDao = new AreaDao();

	public List<Area> select(String parentCode) {
		if(parentCode==null) {
			parentCode = "";
		}
		return areaDao.select(parentCode);
	}
	
}

dao包：

AreaDao类：

package com.jd.area.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.jd.area.imp.IAreaDao;
import com.jd.tool.db.DBLink;
import com.jd.tool.db.IRowMapper;
import com.jd.vo.Area;

public class AreaDao implements IAreaDao {

	public List<Area> select(String parentCode) {
		String sql = "select * from area where parent_code = '"+parentCode+"'";
		final List<Area> LIST = new ArrayList<Area>();
		
		new DBLink().select(sql, (new IRowMapper() {

			public void rowMapper(ResultSet rs) {
				try {
					while(rs.next()) {
						String id = rs.getString("id");
						String name = rs.getString("name");
						String code = rs.getString("code");
						String parentCode = rs.getString("parent_code");
						LIST.add(new Area(id,name,code,parentCode));
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
			
		} ));
		
		
		return LIST;
	}
		
}

servlet：

CascadeServlet：

package com.jd.area.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.jd.area.imp.IAreaService;
import com.jd.area.service.AreaService;

public class CascadeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
      
	private IAreaService areaService = new AreaService();
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parentCode = request.getParameter("parentCode");
		response.setContentType("text/plain; charset=UTF-8");
		//调用service层
		//json
		String json = new Gson().toJson(areaService.select(parentCode));//生成json字符串
		
		//响应页面
		PrintWriter out = response.getWriter();
		out.write(json);
		out.flush();
		out.close();
		
	}

}

index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
	<head>
		<title>Insert title here</title>
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./js/json2.js"></script>
		<script type="text/javascript">
			
			//省
			$(function(){
				var parentCode = "";
				var obj = {
					url: "./CascadeServlet?parentCode="+parentCode ,
					dataType: "text",//用于设置服务器响应回来的数据的类型
					success:function(data){//只有状态码（status）是200时才走
						data = JSON.parse(data);//将一个json字符串转换成一个JavaScript对象
						var options = "<option value=''>--请选择--</option>";
						for(var i = 0; i < data.length; i++){
							var province = data[i];
							options = options + "<option value='"+province.code+"'>"+province.name+"</option>";
						}
						$("#province").empty();
						$("#province").append(options);
					}
				};
				$.ajax(obj);
			});
			
			//市
			function changeCity(){
				var parentCode = $("#province").val();
				if(parentCode==""){
					$("#city").empty();
					$("#city").append("<option value=''>--请选择--</option>");
					$("#county").empty();
					$("#county").append("<option value=''>--请选择--</option>");
					return;
				}
				var obj = {
					url: "./CascadeServlet?parentCode="+parentCode,
					dataType: "text",//用于设置服务器响应回来的数据的类型
					success:function(data){//只有状态码（status）是200时才走
						data = JSON.parse(data);//将一个json字符串转换成一个JavaScript对象
						var options = "<option value=''>--请选择--</option>";
						for(var i = 0; i < data.length; i++){
							var city = data[i];
							options = options + "<option value='"+city.code+"'>"+city.name+"</option>";
						}
						$("#county").empty();
						$("#county").append("<option value=''>--请选择--</option>");
						$("#city").empty();
						$("#city").append(options);
					}
				};
				$.ajax(obj);
			}
			
			//县区
			function changeCounty(){
				var parentCode = $("#city").val();
				if(parentCode==""){
					$("#county").empty();
					$("#county").append("<option value=''>--请选择--</option>");
					return;
				}
				var obj = {
					url: "./CascadeServlet?parentCode="+parentCode,
					dataType: "text",//用于设置服务器响应回来的数据的类型
					success:function(data){//只有状态码（status）是200时才走
						data = JSON.parse(data);//将一个json字符串转换成一个JavaScript对象
						var options = "<option value=''>--请选择--</option>";
						for(var i = 0; i < data.length; i++){
							var county = data[i];
							options = options + "<option value='"+county.code+"'>"+county.name+"</option>";
						}
						$("#county").empty();
						$("#county").append(options);
					}
				};
				$.ajax(obj);
			}
			
		</script>
		
		
	</head>
	<body>
		<select id="province" onchange="changeCity()">
			<option value="">--请选择--</option>
		</select>
		
		<select id="city" onchange="changeCounty()">
			<option value="">--请选择--</option>
		</select>
		
		<select id="county">
			<option value="">--请选择--</option>
		</select>
	</body>
</html>