HTML中三级级联实战

最新推荐文章于 2024-08-18 12:13:08 发布

zzu957

最新推荐文章于 2024-08-18 12:13:08 发布

阅读量539

点赞数

分类专栏： HTML学习 Java项目文章标签： json java

本文链接：https://blog.csdn.net/zzu957/article/details/107621250

版权

HTML学习同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Java项目

7 篇文章 0 订阅

订阅专栏

代码结构：

在这里插入图片描述
部分代码展示：
AreaDao.java代码：

package com.zzu.area.dao;

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

import com.zzu.area.imp.IAreaDao;
import com.zzu.tool.db.DBLink;
import com.zzu.tool.db.IRowMapper;
import com.zzu.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) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		});
		return LIST;
	}

}

AreaService.java代码:

package com.zzu.area.service;

import java.sql.Array;
import java.util.List;

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

CascadeServlet.java代码：

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

public class CascadeServlet extends HttpServlet {
	private IAreaService areaService = new AreaService();
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parentCode = request.getParameter("parentCode");
		response.setContentType("application/json; charset=UTF-8");
		//System.out.println(parentCode);
		// JSON 一种数据存储结构，以字符串为数据类型,该字符串返回到浏览器端口后变成JavaScript对象
		/*
		 * for(Area area : LIST) { System.out.println(area); }
		 */
		String json = new Gson().toJson(areaService.select(""));
		//System.out.println(json);
		PrintWriter out = response.getWriter();
		out.write(json);
		out.flush();
		out.close();
	}
}

index.jsp代码：

<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:"./CascadeServlet",
					dataType:"text",//用于设置服务器端返回什么类型数据
					succcess:function(data){//服务器端返回200响应码
						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);
						
						$("#provience").attend(options);
					}	
				};
				$.ajax(obj);
			});
			
			function changeCity(){
				var parentCode = $("#provience").val();
				if(parentCode==""){
					$("#city").empty();
					$("#city").attend("<option value=''>---请选择---</option>");
					return;
				}
				var obj = {
						url:"./CascadeServlet?parentCode="+parentCode,
						dataType:"text",//用于设置服务器端返回什么类型数据
						succcess:function(data){//服务器端返回200响应码
							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);
							$("#county").empty();
							$("#county").attend("<option value=''>---请选择---</option>");
							$("#city").empty();
							$("#city").attend(options);
						}	
					};
					$.ajax(obj);
			}
			
			function changeCounty(){
				var parentCode = $("#provience").val();
				if(parentCode==""){
					$("#county").empty();
					$("#county").attend("<option value=''>---请选择---</option>");
					return;
				}
				var obj = {
						url:"./CascadeServlet?parentCode="+parentCode,
						dataType:"text",//用于设置服务器端返回什么类型数据
						succcess:function(data){//服务器端返回200响应码
							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);
							$("#county").empty();
							$("#county").attend(options);
						}	
					};
					$.ajax(obj);
			}
		</script>
	</head>
	<body>
		<select id="provience" onchange="changeCity()">
			<option value="">---请选择---</option>
		</select>
		
		<select id="city" onchange="changeCounty">
			<option value="">---请选择---</option>
		</select>
		
		<select id="county">
			<option value="">---请选择---</option>
		</select>
	</body>
</html>