三级级联 省市县 模块化

最新推荐文章于 2024-09-13 17:32:25 发布
最新推荐文章于 2024-09-13 17:32:25 发布
阅读量142 收藏
点赞数
分类专栏： 三级级联 文章标签： gson json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43566612/article/details/107614796
版权

 

1.创建maven项目，模块化创建imp Servlet Service Dao vo，创建相应文件

运行原理：

浏览器 -----> servlet ----->service-----> dao-----> DBLink----->  数据库----->DBLink ----->dao -----> service-----> servlet -----> 浏览器

2.引入 JDBC文件， jquery-1.8.3.min.js 和json2.js文件

（json2.js可以解决低版本浏览器不兼容JSON对象的问题）

3. 在pom.xml中配置 servlet log4j gson mysql 的依赖包

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
	<head>
		<title>选项</title>
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./js/json2.js"></script>
		<script>
			$(function(){
					var obj={
					url:"./TestServlet",
					type:"get",
					dataType:"text",
					success:function(data){
						var options="<option value=''>--请选择省份--</option>";
						data=JSON.parse(data);
						for (var i = 0; i < data.length; i++) {
							var shuju=data[i];
							options=options+"<option value='"+shuju.code+"'>"+shuju.name+"</option>"
						}
						$("#provinces").empty();
						$("#provinces").append(options);
					   }
				};
					$.ajax(obj);			
			});
			
			function changeCity(){
				var parentCode=$("#provinces").val();
				if(parentCode==""){
					$("#city").empty();
					$("#city").append("<option value=''>--请选择市--</option>");
					$("#county").empty();
					$("#county").append("<option value=''>--请选择县区--</option>");
					return;
				}
				var obj={
						url:"./TestServlet?parentCode="+parentCode,
						type:"get",
						dataType:"text",
						success:function(data){
							var options="<option value=''>--请选择市--</option>";
							data=JSON.parse(data);
							for (var i = 0; i < data.length; i++) {
								var city=data[i];
								options=options+"<option value='"+city.code+"'>"+city.name+"</option>"
							}
							$("#city").empty();
							$("#city").append(options);
							$("#county").empty();
							$("#county").append("<option value=''>--请选择县区--</option>");
						   }
					};
						$.ajax(obj);
			};
			
			
			function changeCounty(){
				var parentCode=$("#city").val();
				if(parentCode==""){
					$("#county").empty();
					$("#county").append("<option value=''>--请选择县区--</option>");
					return;
				}
				var obj={
						url:"./TestServlet?parentCode="+parentCode,
						type:"get",
						dataType:"text",
						success:function(data){
							var options="<option value=''>--请选择县区--</option>";
							data=JSON.parse(data);
							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(options);
						   }
					};
						$.ajax(obj);
			};
		</script>
	</head>
	<body >
		<select id="provinces" onchange="changeCity()">
			<option value="">--请选择省份--</option>
		</select>
		<select id="city"  onchange="changeCounty()">
			<option value="">--请选择市--</option>
		</select>
		<select id="county">
			<option value="">--请选择县区--</option>
		</select>
	</body>
</html>

 TestServlet 

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 TestServlet 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("text/plain;charset=utf-8");
		String json =new Gson().toJson(areaService.select(parentCode));
		PrintWriter out = response.getWriter();
		out.print(json);
		out.flush();
		out.close();
	}

}

 

 

IAreaService.java

package com.jd.Area.imp;


import java.util.List;

import com.jd.Area.Area;

public interface IAreaService {
	List<Area> select(String parentCode);
}

 

 AreaService .java

package com.jd.Area.service;


import java.util.List;

import com.jd.Area.Area;
import com.jd.Area.Dao.AreaDao;
import com.jd.Area.imp.IAreaDao;
import com.jd.Area.imp.IAreaService;

public class AreaService implements IAreaService {
	private IAreaDao areaDao=new AreaDao();

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

IAreaDao .java 

package com.jd.Area.imp;


import java.util.List;

import com.jd.Area.Area;

public interface IAreaDao {
	List<Area> select(String parentCode);
}

AreaDao .java

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.Area;
import com.jd.Area.imp.IAreaDao;
import com.jd.tool.db.DBLink;
import com.jd.tool.db.IRowMapper;

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("name");
						LIST.add(new Area(id,name,code,parentCode));
					}
				} catch (SQLException e) {

					e.printStackTrace();
				}
			}

		});
		return LIST;
	}
	
}

 

 Area .java

package com.jd.Area;

public class Area {
	String id;
	String name;
	String code;
	String 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;
	}
	
	public Area(String id, String name, String code, String parentCode) {
		this.id = id;
		this.name = name;
		this.code = code;
		this.parentCode = parentCode;
	}
	@Override
	public String toString() {
		return "Area [id=" + id + ", name=" + name + ", code=" + code + ", parentCode=" + parentCode + "]";
	}
	
	
}

 

效果：

 

liulu璐
关注
专栏目录
2020年全国4级行政区域，省、市、区县、镇，4级级联
07-12
2020年全国4级行政区域，省、市、区县、镇，下载后Mysql数据库直接导入就可使用，下载直接导入即可
省市区 - 三级联动通用化模块组件
weixin_34007906的博客
06-16 131
都说我们要做模块化设计，而不要做功能化设计 什么是模块化设计，就是可插拔性高，组件化，想要就用，不要用拉倒，直接删除就行 什么是功能化设计，就是一个简单的功能，实现想要的效果，但是不够通用化，别人要用的话需要读懂你的代码，还需要复制黏贴很多代码这样效率不高   今天写了一个省市区三级联动的模块，写完后使用会非常方便，也很灵活 主要使用到的技术：jquery，redis，springMVC...
省市县三级联动(数据库)
热门推荐
u010880345的专栏
01-05 1万+
很多项目中，注册用户和注册企业时需要用到省市县三级联动的情况，自己整理了一下。前端主要是jquery easyui做的。 页面效果: 目录结构: 项目源码地址: https://github.com/lilongsen/LimxDream此项目为maven版本。 登陆时的用户名:limingxing密码:123456 AreaDao层接口 package
全国地区省市县级联关系表
05-24
包含、全国、华中、华南等7大区、省、市、县、层级/级联关系
全国地区 省市区县街道 （element级联选择器适用）.json
09-06
全国地区 细分至省市区县街道 element级联选择器适用
3级级联 国家--城市
weixin_30321709的博客
09-18 111
//3级级联 国家--城市 function updateProvContent(){ //隐藏二级、三级下拉框 $('#native1').css('display','none'); $('#native2').css('display','none'); ...
省市县三级级联（模块化开发）
不动声色的小蜗牛的博客
07-27 279
不废话，上代码： 先看一下项目列表： 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)
select多选框省市县三级级联
qq_43527694的博客
07-27 672
通过“模块化开发”的方式来实现三级级联： test.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/javas
JAVA-模块化开发-三级级联（省市县）（异步和json的联合运用）
Mr.helios的博客
07-27 1207
项目模块 第一步：建立省市区三级数据库 具体大家可以上网上百度查询地区源码 这里给出建表源码 CREATE TABLE `area` ( `id` varchar(36) NOT NULL COMMENT '地域ID', `code` varchar(30) NOT NULL COMMENT '地域编码', `name` varchar(30) NOT NULL COMMENT '地域名称', `parent_code` varchar(30) DEFAULT NULL COMMENT '
angularjs 地区三级级联
04-02
接着，描述提到"angularjs 编写的省市区下拉框三级级联自定义指令，包含了2018年1月最新的全国省市区数据(json)"。这意味着我们有一个自定义指令，它通过JSON数据文件来填充下拉框的选项。JSON（JavaScript Object ...
微信小程序 省市区三级联动选择
10-14
9. **自定义组件封装**：为了提高代码复用性和模块化，可以将省市区三级联动选择封装成一个自定义组件，这样在其他页面中可以直接引入使用，简化开发流程。 综上所述，微信小程序的省市区三级联动选择涉及到了UI...
省市区三级联动（代码+SQL）
12-22
标题中的“省市区三级联动（代码+SQL）”是指在软件开发中常见的一个功能模块，特别是在中国的地理信息处理中，为了实现用户选择所在省份、城市和区县的联动效果。这个功能常见于地址输入、配送范围设定等场景。在这...
省市区三级级联式菜单
weixin_44646551的博客
11-13 540
省市区三级级联式菜单 效果展示： 使用node.js作为后端的前后端交互式级联菜单 使用es6面对对象方式 使用资源 此处截取片段： 整体思路 首先发送ajax请求省份，将值传入select标签中，再根据select的value值请求市，在更具市的值来请求区。 代码实现 首先，根据需求设计接口文档：## 三级式级联菜单接口文档 URL ：http://10.9.72.248:4001 Method :GET DataType : 请求消息: QueryString 响应消息: JSON 接口名
js三级联动案例(省份,城市,县区,街道)
dust__的博客
08-02 1847
<script type="text/javascript"> /*分析: * 1.创建页面元素(下拉列表框 select) * 2.创建二维数组存储数据(地区) * 3.获取页面元素(下拉框 省份,城市,区县) * 4.将所有的省份添加在省份的下拉框(for循环遍历数组,if判断索引为2,的值值是否为0,累计添加省份名,) * 5.给省...
省市级联mysql数据_全国省市区县三级级联数据
weixin_42632434的博客
01-21 260
全国省市区县三级级联数据mysql脚本 无 CREATE TABLE `p_c_a` ( `id` varchar(255) DEFAULT NULL, `area_info` varchar(255) DEFAULT NULL, `father_id` varchar(255) DEFAULT NULL, `area_level` varchar(255) DEFAULT NULL) ENGIN...
Gson转换
最新发布
09-13 344
gson格式转换.create());@Overridetry {
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 479
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Java后端省市县三级级联
06-13
实现Java后端省市县三级级联可以通过以下步骤： 1. 建立数据库表格 建立三个表格，分别是省份表、城市表和区县表，每个表格至少应该包含以下字段： 省份表： - 省份ID - 省份名称 城市表： - 城市ID - 城市...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值