json+Mysql+JavaScript实现省市县三级级联

最新推荐文章于 2022-06-19 01:12:06 发布
最新推荐文章于 2022-06-19 01:12:06 发布
阅读量281 收藏 2
点赞数
分类专栏： web java json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bravery__/article/details/107614778
版权
java 同时被 3 个专栏收录
46 篇文章 1 订阅
订阅专栏
web
3 篇文章 0 订阅
订阅专栏
json
1 篇文章 0 订阅
订阅专栏

项目列表：

在这里插入图片描述

CascadeServlet：

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 CascadeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    private  IAreaService areaService = new AreaService();
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/plain; charset=UTF-8");
		//json 一种数据存储的结构，以字符串为数据类型，该字符串返回到浏览器端后变成javascript对象
		String json = new Gson().toJson(areaService.select(""));
		System.out.println(json);
		PrintWriter out = response.getWriter();
		out.write(json);
		out.flush();
		out.close();
	}

}

IAreaService：

package com.jd.imp;

import java.util.List;

import com.vo.Area;

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

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.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);
	}
}

IAreaDao：

package com.jd.imp;

import java.util.List;

import com.vo.Area;

public interface IAreaDao {

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

public class AreaDao implements IAreaDao{

	public List<Area> select(String parentCode) {//返回List对象
		String sql = "select * from area where parent_code=''";
		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;
	}
}

Area：

package com.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 + "]";
	}
	
	
}

DBLink：

package com.tool.db;



import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import org.apache.log4j.Logger;

import com.tool.PropertiesTool;



/**
 * 数据库管理工具类
 *
 * @author GaoHuanjie
 */
public class DBLink {
	
	private Logger logger = Logger.getLogger(DBLink.class);
	
	/**
	 * 获取数据库连接
	 *
	 * @author GaoHuanjie
	 */
	private Connection getConnection() {
		try {
			Class.forName("com.mysql.jdbc.Driver");//加载驱动
			String userName = PropertiesTool.getValue("db.username");
			String password = PropertiesTool.getValue("db.password");
			String url = PropertiesTool.getValue("db.url");
			return DriverManager.getConnection(url, userName, password);//获取连接
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}
		return null;
	}
	
	/**
	 * 判断SQL语句是否能查出数据
	 *
	 * @author GaoHuanjie
	 */
	public boolean exist(String sql) {
		Connection connection = null;
		Statement statement =null;
		ResultSet resultSet=null;
		try {
			connection = getConnection();//获取连接
			statement = connection.createStatement();
			resultSet= statement.executeQuery(sql);//执行sql,将查询的数据存到ResultSet类型的变量中
			return resultSet.next();
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {
			close(resultSet,statement,connection);
		}
		return false;
	}
	
	/**
	 * 判断SQL语句是否能查出数据
	 *
	 * @author GaoHuanjie
	 */
	public boolean exist(String sql, Object ...params) {
		Connection connection = null;
		PreparedStatement preparedStatement =null;
		ResultSet resultSet=null;
		try {
			connection = getConnection();//获取连接
			preparedStatement = connection.prepareStatement(sql);
			for (int i = 0; i < params.length; i++) {
				preparedStatement.setObject(i+1, params[i]);
				//setObject:第一个是指你SQL语句中的第几个参数，第二个是要设置的值
			}
			resultSet= preparedStatement.executeQuery();//执行sql,将查询的数据存到ResultSet类型的变量中
			return resultSet.next();
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {
			close(resultSet,preparedStatement,connection);
		}
		return false;
	}
	
	/**
	 * 查询数据
	 *
	 * @author GaoHuanjie
	 */
	public void select(String sql,IRowMapper rowMapper) {//接口无法创建对象，所以rowMapper参数一定指向IRowMapper接口实现类对象
		Connection connection = null;
		Statement statement =null;
		ResultSet resultSet=null;
		try {
			connection = getConnection();//获取连接
			statement = connection.createStatement();
			resultSet= statement.executeQuery(sql);//执行sql,将查询的数据存到ResultSet类型的变量中
			rowMapper.rowMapper(resultSet);//因为rowMapper参数指向IRowMapper接口实现类对象，所以此处将调用接口实现类中所实现的rowMapper方法  多态
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {//释放资源
			close(resultSet,statement,connection);
		}
	}
	
	/**
	 * 查询数据
	 *
	 * @author GaoHuanjie
	 */
	public void select(String sql,IRowMapper rowMapper,Object ...params) {
		Connection connection = null;
		PreparedStatement preparedStatement =null;
		ResultSet resultSet=null;
		try {
			connection = getConnection();//获取连接
			preparedStatement= connection.prepareStatement(sql);//含有？号占位符的sql
			for (int i = 0; i < params.length; i++) {
				preparedStatement.setObject(i+1, params[i]);//为？号赋值
			}
			resultSet= preparedStatement.executeQuery();//执行sql
			rowMapper.rowMapper(resultSet);//因为rowMapper参数指向IRowMapper接口实现类对象，所以此处将调用接口实现类中所实现的rowMapper方法  多态
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {//释放资源
			close(resultSet,preparedStatement,connection);
		}
	}

	/**
	 * 修改（insert、update和delete）数据
	 *
	 * @author GaoHuanjie
	 */
	public boolean update(String sql) {
		Connection connection = null;
		Statement statement = null;
		try {
			connection = getConnection();//获取数据库连接对象，一个对象表示一次数据库连接
			statement = connection.createStatement();//获取Statement对象
			int result = statement.executeUpdate(sql);//执行sql语句，返回受影响的行数，仅限于数据insert、update和delete
			return result>0;//处理结果
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {//即便有异常也会执行代码
			close(statement,connection);
		}
		return false;
	}
	
	/**
	 * 修改（insert、update和delete）数据
	 *
	 * @author GaoHuanjie
	 */
	public boolean update(String sql,Object ...params) {
		Connection connection= null;
		PreparedStatement preparedStatement= null;
		try {
			connection= getConnection();
			preparedStatement= connection.prepareStatement(sql);//含有？号占位符的sql
			for (int i = 0; i < params.length; i++) {
				preparedStatement.setObject(i+1, params[i]);//为？号赋值
			}
			return preparedStatement.executeUpdate()>0;
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
			if(connection!=null) {
				try {
					connection.rollback();
				} catch (SQLException e1) {
					e1.printStackTrace();
				}
			}
			
		}finally {
			close(preparedStatement,connection);
		}
		return false;
	}
	public boolean batch(String...sqls) {
		Connection connection = null;
		Statement statement = null;
		try {
			connection = getConnection();
			connection.setAutoCommit(false);
			statement = connection.createStatement();
			for (String sql : sqls) {
				statement.addBatch(sql);
			}
			statement.executeBatch();
			connection.commit();
			return true;
		} catch (Exception e) {
			logger.debug(e.getMessage(), e);
		}finally {
			close(statement,connection);
		}
		return false;
		
	}
	
	/**
	 * 释放资源
	 *
	 * @author GaoHuanjie
	 */
	private void close(Statement statement,Connection connection) {
		try {
			if(statement!=null) {//有可能由于异常导致statement没有赋值，比如url出错
				statement.close();
			}
		} catch (SQLException e) {
			logger.debug(e.getMessage(), e);
		}
		try {
			if(connection!=null) {
				connection.close();
			}
		} catch (SQLException e) {
			logger.debug(e.getMessage(), e);
		}
	}
	
	/**
	 * 释放资源
	 *
	 * @author GaoHuanjie
	 */
	private void close(ResultSet resultSet,Statement statement,Connection connection) {//重载
		try {
			if(resultSet!=null) {
				resultSet.close();
			}
		} catch (SQLException e) {
			logger.debug(e.getMessage(), e);
		}
		close(statement,connection);
	}
}

IRowMapper：

package com.tool.db;



import java.sql.ResultSet;

public interface IRowMapper {

	void rowMapper(ResultSet rs);
}

PropertiesTool：

package com.tool;


import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class PropertiesTool {

	private static Properties properties = new Properties();
	
	static {
		InputStream inputStream = PropertiesTool.class.getClassLoader().getResourceAsStream("db.properties");//将db.properties变为javaIO流对象
		try {
			properties.load(inputStream);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	public static String getValue(String key) {
		return properties.getProperty(key);
	}
}

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>Insert title here</title>
		<script src="./js/jquery-1.8.3.min.js"></script>
		<script src="./js/json2.js"></script>
		<script type="text/javascript">
			$(function(){
					var obj={
						url:"./CascadeServlet",
						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>";
							}
							$("#province").append(options);
						}
					}
					$.ajax(obj);
			});
			
			function changecity(){
				console.log(111);
				var parentCode=$("#province").val();//获取省对应的code,来获得相应的市
				if (parentCode=="") {
					$("#city").empty();
					$("#city").html("<option value=''>---请选择---</option>");
					$("#county").empty();
					$("#county").html("<option value=''>---请选择---</option>");
					return;
				}
				var obj={
						url:"./CascadeServlet?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>");
							console.log(options);
							$("#city").append(options);
						}
					}
					$.ajax(obj);
			}
			
			function changecounty(){
				var parentCode=$("#city").val();//获取市对应的code,来获得相应的县区
				if (parentCode=="") {
					$("#county").empty();
					$("#county").html("<option value=''>---请选择---</option>");
					return;
				}
				var obj={
						url:"./CascadeServlet?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>
Wwwwww~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java+ajax+mysql实现省市县三级联动
05-21
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库...
JavaScript实现省市县三级级联特效
10-19
主要为大家详细介绍了JavaScript实现省市县三级级联特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
中国省市区城市列表mysql数据表，可直接导入数据库、可转JSON数据，带行政区划码和经纬度
07-06
中国省市区城市列表mysql数据表，可直接导入数据库、可转JSON数据，带行政区划码和经纬度
MySQL、全国省和市数据库，附上解析好的json文件
永远年轻，永远装嫩，永远不知好歹，永远热泪盈眶...
05-27 836
全国省和市数据库（附json） 数据库示例 数据库代码 \# Host: localhost (Version: 5.5.15) \# Date: 2018-05-27 14:35:44 \# Generator: MySQL-Front 5.3 (Build 4.269) /*!40101 SET NAMES utf8 */; \# \# Structure f...
什么是一级域名？什么是二级域名？什么又是三级域名呢？举个例子嘛
qq_37805832的博客
06-19 5601
比如 一级域名：baidu.com 二级域名：www 三级域名_.www.baidu.com.三级域名就是_下划线的哪个
使用JSON方式实现省市级联效果(JavaScript)
weixin_48112113的博客
07-19 5720
1. 任务要求 1）理解JSON的概念； 2）掌握JSON对象的定义以及使用； 3）如何使用JSON存储城市信息； 4）如何页面加载时，遍历JSON数据，并将JSON数据渲染到页面； 5）如何使用JSON实现下拉框联动。 2. 需求说明 制作如下图所示的页面，页面加载时第一个下拉框显示所有的省的信息，当第一个下拉框选择数据后，第二个下拉框中显示对应省份的城市数据。 3. 实现思路 ...
使用JDBC获取数据库数据，并生成json格式文件（省市区三级联动）
热门推荐
唯爱丶卡卡西的博客
01-09 1万+
前言： 转眼已经2018年了， 17年有点忙，出差将近三个月，博客也停更了好久。 一直都是不停的修复bug，和做一些业务需要的提示和交互。主要是因为和硬件有关系所以比较麻烦，开发周期也很长，而且还不稳定，硬件先行，然后在是调试，交互。不过也有好处，学到的东西自然不是简简单单的 代码了。 然后在转换这个数据之前我啥真的是一脸懵逼啊，连jsbc都不知道是啥，也不知道怎么用，总感觉是陌生的东西，
vue + elementUI实现省市县三级联动的方法示例
10-16
主要介绍了vue + elementUI实现省市县三级联动的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Ajax实现省市区三级级联(数据来自mysql数据库)
12-11
实现Ajax实现省市区三级级联，需要Java解析json技术 整体Demo下载地址如下: 点我下载 address.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here&...
javascript+json实现级联查询
04-17
利用javascript+json实现级联查询
以js中json为数据源生成省市县三级联动，基于DEV17.1控件
05-31
以js中json为数据源生成省市县三级联动，基于DEV17.1控件，可根自己程序据控件修改数据源
中国省市区JSON以及JS三级联动
11-10
里面有SON和JS 直接下载就能使用 是中国的省市区县三级联动 包括JS area.json 和address.js
全国省市县地区三级数据JSON格式 js文件
05-11
本想免费积分的。。结果老是有人不肯共享，我也很绝望啊，1积分不过分，里面的children分别是 二级和三级，请根据个人需求更改
Echarts全国省市区县地图json和js数据文件及实例
04-26
里面包含啦迁徙图实例代码，Echarts全国省市区县地图json和js数据文件及实例，
java web省市县级联操作
07-05
里面有数据库，通过数据库读取省市县，进行级联操作。
2019最新省市区区域json数据
01-03
2019根据国家统计局区域统计，手动编辑适用js省市区区域选择的json数据。（香港澳门台湾除外）
行政省市区数据库（json文件）
09-23
中区地区（省市区）json文件，已处理好，格式：{"id":"100000","name":"中国","children":[{"id":"110100","name":"北京市","children":[]}……]}，简单明了，可直接用
List集合常用方法总结
bravery__的博客
04-15 1万+
集合： 又称为容器，用于存储，提取，删除数据。JDK提供的集合都包含在java.util包中。 集合分为collection和Map： collection： Map： 由于List集合中的ArrayList与LinkedList都是List接口的实现类，所以以ArrayList为例，讲解List常用方法。 import java.util.ArrayList; import java.util....
Set集合常用方法总结
bravery__的博客
04-15 2524
HashSet常用方法： 1.add() 向Set集合中添加元素 但不能添加重复元素，Set集合中不允许元素重复 因为HashMap的key不允许重复，所以HashSet添加的元素也不允许重复 Set集合中HashSet不是按照存储顺序保存，输出顺序具有不确定性 package second; import java.util.HashMap; import java.util.HashSet; ...
Java后端省市县三级级联
最新发布
06-13
实现Java后端省市县三级级联可以通过以下步骤： 1. 建立数据库表格 建立三个表格，分别是省份表、城市表和区县表，每个表格至少应该包含以下字段： 省份表： - 省份ID - 省份名称 城市表： - 城市ID - 城市...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值