实现三级级联

最新推荐文章于 2021-05-22 01:21:39 发布

QBjie

最新推荐文章于 2021-05-22 01:21:39 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107614888

版权

pom.xml配置i：

可以在：https://mvnrepository.com/查找。

dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.2</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.44</version>
</dependency>

<dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>1.2.16</version>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>

项目列表：

IAreaDao:

package com.jd.imp;

import java.util.List;

import com.jd.vo.Area;

public interface IAreaDao {

	 List<Area> select(String parentCode);
}

IAreaService:

package com.jd.imp;

import java.util.List;

import com.jd.vo.Area;

public interface IAreaService {

	List<Area> select(String parentCode);
}

AreaDao:

package com.jd.dao;

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

import com.jd.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();
				}
			}
			
		});
		System.out.println(LIST.size());
		return LIST;
	}

	

	
}

AreaService:

package com.jd.service;

import java.util.List;

import com.jd.dao.AreaDao;
import com.jd.imp.IAreaDao;
import com.jd.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);
	}

	
}

SascateServlet:

package com.jd.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.imp.IAreaService;
import com.jd.service.AreaService;


public class SascateServlet 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");
		String json = new Gson().toJson(areaService.select(parentCode));
		PrintWriter out = response.getWriter();
		System.out.println(json);
		out.write(json);
		out.flush();
		out.close();
	}

}

Area:

package com.jd.vo;

public class Area {

	String id;
	String name;
	String code;
	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 + "]";
	}
	
	
}

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 obj = {
					url:"./SascateServlet",
					dataType:"text",
					success:function(data){
						data=JSON.parse(data);
						var options ="<option value=''>---请选择省份---</option>"; 
						for (var i = 0;i<data.length;i++) {
							var obj = data[i];
							options = options +"<option value='"+obj.code+"'>"+obj.name+"</option>";
						}
						console.log(options);
						$("#province").append(options);
					}
				};
				$.ajax(obj);
			});
		
		function changeCity(){
			$(function(){
				var parentCode =$("#province").val();
				if(parentCode==""){
					$("#city").empty();
					$("#city").html("<option value=''>---请选择市---</option>");
					return;
				}
				var obj = {
						url:"./SascateServlet?parentCode="+parentCode,
						dataType:"text",
						success:function(data){
							data=JSON.parse(data);
							var options ="<option value=''>---请选择市---</option>"; 
							for (var i = 0; i < data.length; i++) {
								var obj = data[i];
								options = options +"<option value='"+obj.code+"'>"+obj.name+"</option>";
							};
							$("#city").empty();
							$("#county").empty();
							$("#county").html("<option value=''>---请选择县区---</option>");
							$("#city").append(options);
							}
						};
						$.ajax(obj);
				});
			
		}
		function changeCounty(){
			$(function(){
				var parentCode =$("#city").val();
				if(parentCode==""){
					$("#county").empty();
					$("#county").html("<option value=''>---请选择县区---</option>");
					return;
				}
				var obj = {
						url:"./SascateServlet?parentCode="+parentCode,
						dataType:"text",
						success:function(data){
							data=JSON.parse(data);
							var options = "<option value=''>---请选择县区---</option>"; 
							for (var i = 0; i < data.length; i++) {
								var obj = data[i];
								options = options +"<option value='"+obj.code+"'>"+obj.name+"</option>";
							};
							$("#county").empty();
							$("#county").append(options);
							}
						};
						$.ajax(obj);
				});
			
		}
		</script>
	</head>
	
	<body>
		<select id="province" onchange="changeCity()">
		</select>
		<select id="city" onchange="changeCounty()">
			<option value=''>---请选择市---</option>
		</select>
		<select id="county">
			<option value=''>---请选择县区---</option>
		</select>
	</body>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
  	<description>
  	</description>
  	<display-name>SascateServlet</display-name>
  	<servlet-name>SascateServlet</servlet-name>
  	<servlet-class>com.jd.servlet.SascateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>SascateServlet</servlet-name>
  	<url-pattern>/SascateServlet</url-pattern>
  </servlet-mapping>
</web-app>

js: