通过ajax实现省市县三级联动

最新推荐文章于 2022-03-07 15:03:45 发布
最新推荐文章于 2022-03-07 15:03:45 发布
阅读量942 收藏 5
点赞数 5
分类专栏： 笔记 JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiulanyangyang/article/details/106595990
版权

ajax实现省市县三级联动

先看效果

ajax实现省市县联动效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

** 创建index.jsp**
部分代码如下：

<body>
<div align="center">
<select name="province" id="province">
<option value="">===请选择===</option>
</select>
<select name="Cities" id="Cities">
<option value="">===请选择===</option>
</select>
<select name="Counties" id="Counties">
<option value="">===请选择===</option>
</select>
</div>
</body>

** 准备好中国行政划分数据**

这种表有ID ，NAME,PID,SNAME,CITYLEVEL和MERNAME这些字段。

创建包名

在这里插入图片描述

  1. 导入需要用到的jar包
    在这里插入图片描述

c3p0连接池配置
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<c3p0-config>
	<default-config> 
		<property name="jdbcUrl">jdbc:oracle:thin:@ip地址:1521:数据库名</property>
		<property name="driverClass">oracle.jdbc.driver.OracleDriver</property>
		<property name="user">用户名</property>
		<property name="password">密码</property>
		
		<property name="acquireIncrement">3</property>
		<property name="initialPoolSize">10</property>
		<property name="minPoolSize">2</property>
		<property name="maxPoolSize">10</property>
	</default-config>
</c3p0-config>

创建省市县的实体类文件
省级城市实体类代码

public class Province {
	private int ID;
	private String NAME;
	private int PID;
	private String SNAME;
	private int CITYLEVEL;
	private String  MERNAME;
	}

市级城市实体类代码

public class Cities {
	private int ID;
	private String NAME;
	private int PID;
	private String SNAME;
	private int CITYLEVEL;
	private String  MERNAME;
	}

县区级城市实体类代码

public class Counties {
    private int ID;
	private String NAME;
	private int PID;
	private String SNAME;
	private int CITYLEVEL;
	private String  MERNAME;
	}

在dao包下创建ChinaCity类的文件

package cn.orz.city.dao;

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

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import cn.itcast.jdbc.TxQueryRunner;
import cn.orz.city.domain.Cities;
import cn.orz.city.domain.Counties;
import cn.orz.city.domain.Province;


public class ChinaCity {

	private QueryRunner qr=new TxQueryRunner();
	
	//查询所有的省份
	 public List<Province> fiandProvince() {
		  try {  
		  String sql="select  t.*  from  CHINACITY  t where t.citylevel='1'";
		  
		  return  qr.query(sql,new BeanListHandler<Province>(Province.class));
		  
		} catch (SQLException e) {
			
			throw new RuntimeException(e);
		}
		
	}
	  
	// 查询省下的所有市  市的PID为省的ID
	  public List<Cities> fiandCities(int pid) {
		  try {  
		  String sql="select  t.*  from  CHINACITY  t where 1=1 and t.citylevel='2' and t.pid=?";
		
		  return  qr.query(sql,new BeanListHandler<Cities>(Cities.class),pid);
		  
		} catch (SQLException e) {
			
			throw new RuntimeException(e);
		}
		
	}
	// 查询市下的所有县区  县区的PID为市省的ID
	  public List<Counties> fiandCounties(int pid) {
		  try {  
		  String sql="select  t.*  from  CHINACITY  t where 1=1 and t.citylevel='3' and t.pid=?";
		  
		  return  qr.query(sql,new BeanListHandler<Counties>(Counties.class),pid);
		  
		} catch (SQLException e) {
			
			throw new RuntimeException(e);
		}
		
	}
	  

}

创建CityService类

package cn.orz.city.service;

import java.util.List;

import cn.orz.city.dao.ChinaCity;
import cn.orz.city.domain.Cities;
import cn.orz.city.domain.Counties;
import cn.orz.city.domain.Province;

public class CityService {
	
	ChinaCity chinacity=new ChinaCity();
	
	
	public List<Province> fiandProvince() {
		
		return chinacity.fiandProvince();
		
	}
	
	 public List<Cities> fiandCities(int pid) {
		
		 return chinacity.fiandCities(pid);
		 
	 }
	 
	 public List<Counties> fiandCounties(int pid) {
		
		 return chinacity.fiandCounties(pid);

      }

}

ProvinceServlet代码如下

package cn.orz.city.servlet;

import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.JsonArray;

import cn.orz.city.domain.Province;
import cn.orz.city.service.CityService;
import net.sf.json.JSONArray;

@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		CityService cityservice=new CityService();
        List<Province> Provincelist =cityservice.fiandProvince();
		String json=JSONArray.fromObject(Provincelist).toString();
		response.getWriter().print(json);
		
	}


}

CitiesServlet代码如下

package cn.orz.city.servlet;

import java.io.IOException;
import java.util.List;

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

import cn.orz.city.domain.Cities;
import cn.orz.city.service.CityService;
import net.sf.json.JSONArray;


@WebServlet("/CitiesServlet")
public class CitiesServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
 

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		CityService cityservice=new CityService();
		int pid=Integer.parseInt(request.getParameter("pid"));
		 List<Cities> Citieslist=cityservice.fiandCities(pid);
		   String json=JSONArray.fromObject(Citieslist).toString();
		
			response.getWriter().print(json);
	}

}

CountiesServlet代码

package cn.orz.city.servlet;

import java.io.IOException;
import java.util.List;

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

import cn.orz.city.domain.Counties;
import cn.orz.city.service.CityService;
import net.sf.json.JSONArray;


@WebServlet("/CountiesServlet")
public class CountiesServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		CityService cityservice=new CityService();
		int pid=Integer.parseInt(request.getParameter("pid"));
		
		 List<Counties> Countieslist=cityservice.fiandCounties(pid);
		   String json=JSONArray.fromObject(Countieslist).toString();
		  
			response.getWriter().print(json);
	}

}

index.jsp中省市县联动核心代码

<script type="text/javascript">
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			return new ActiveXObject("Micorsoft.XMLHTTP");
		}	
	}
}

 window.onload= function(){
	 
		//**省市县三级联动**//  
   var xmlHttp=createXMLHttpRequest();
   
	xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);
	
	xmlHttp.send(null);
	
	xmlHttp.onreadystatechange= function(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
			var  proArray=eval("("+xmlHttp.responseText+")");
			for(var i=0;i<proArray.length;i++){
				var pro=proArray[i];
				 
				var optionEle=document.createElement("option");
				    optionEle.value=pro.ID;
				   
				var textNode=document.createTextNode(pro.NAME);
				
				optionEle.appendChild(textNode);
			
				document.getElementById("province").appendChild(optionEle);
			}
		  }
		}
		
	};
	
	document.getElementById("province").onchange=function(){
		 var xmlHttp=createXMLHttpRequest();
		 
		 xmlHttp.open("POST","<c:url value='/CitiesServlet'/>",true);
		 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 xmlHttp.send("pid="+this.value);
		 xmlHttp.onreadystatechange= function(){
			if(xmlHttp.readyState==4){
				if(xmlHttp.status==200){
				var citiesselect=document.getElementById("Cities");
				
				var citiesoptionArray=citiesselect.getElementsByTagName("option");
				
				
					while(citiesoptionArray.length>1){
						citiesselect.removeChild(citiesoptionArray[1]);
					}
				var  citiesArray=eval("("+xmlHttp.responseText+")");
				
				for(var i=0;i<citiesArray.length;i++){
					var cities=citiesArray[i];
					 
					var optionEle=document.createElement("option");
					    optionEle.value=cities.ID;
					   
					var textNode=document.createTextNode(cities.NAME);
					
					optionEle.appendChild(textNode);
				
					citiesselect.appendChild(optionEle);
				    }
				  }
				}
			};
	
			
		
			document.getElementById("Cities").onchange=function(){
				
				var xmlHttp=createXMLHttpRequest();
				
				xmlHttp.open("POST","<c:url value='/CountiesServlet'/>",true);
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.send("pid="+this.value);
				 xmlHttp.onreadystatechange= function(){
					 if(xmlHttp.readyState==4){
					 if(xmlHttp.status==200){
					 var Countiesselect=document.getElementById("Counties");
					 						
					 var CountiesoptionArray=Countiesselect.getElementsByTagName("option");
					 						
					 						
					 while(CountiesoptionArray.length>1){
					 	Countiesselect.removeChild(CountiesoptionArray[1]);
					 }
					 		var  CountiesArray=eval("("+xmlHttp.responseText+")");
					 						
					 			for(var i=0;i<CountiesArray.length;i++){
					 				var Counties=CountiesArray[i];
					 							 
					 				var optionEle=document.createElement("option");
					 				    optionEle.value=Counties.ID;
					 							   
					 				var textNode=document.createTextNode(Counties.NAME);
					 							
					 				optionEle.appendChild(textNode);
					 				Countiesselect.appendChild(optionEle);
					 			}
					 	     }
					 	}
					  };	
				
				
				
			};
	};
	
 }

</script>

完整的index.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript">
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			return new ActiveXObject("Micorsoft.XMLHTTP");
		}	
	}
}

 window.onload= function(){
	 
		//**省市县三级联动**//  
   var xmlHttp=createXMLHttpRequest();
   
	xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);
	
	xmlHttp.send(null);
	
	xmlHttp.onreadystatechange= function(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
			var  proArray=eval("("+xmlHttp.responseText+")");
			for(var i=0;i<proArray.length;i++){
				var pro=proArray[i];
				 
				var optionEle=document.createElement("option");
				    optionEle.value=pro.ID;
				   
				var textNode=document.createTextNode(pro.NAME);
				
				optionEle.appendChild(textNode);
			
				document.getElementById("province").appendChild(optionEle);
			}
		  }
		}
		
	};
	
	document.getElementById("province").onchange=function(){
		 var xmlHttp=createXMLHttpRequest();
		 
		 xmlHttp.open("POST","<c:url value='/CitiesServlet'/>",true);
		 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 xmlHttp.send("pid="+this.value);
		 xmlHttp.onreadystatechange= function(){
			if(xmlHttp.readyState==4){
				if(xmlHttp.status==200){
				var citiesselect=document.getElementById("Cities");
				
				var citiesoptionArray=citiesselect.getElementsByTagName("option");
				
				
					while(citiesoptionArray.length>1){
						citiesselect.removeChild(citiesoptionArray[1]);
					}
				var  citiesArray=eval("("+xmlHttp.responseText+")");
				
				for(var i=0;i<citiesArray.length;i++){
					var cities=citiesArray[i];
					 
					var optionEle=document.createElement("option");
					    optionEle.value=cities.ID;
					   
					var textNode=document.createTextNode(cities.NAME);
					
					optionEle.appendChild(textNode);
				
					citiesselect.appendChild(optionEle);
				    }
				  }
				}
			};
	
			
		
			document.getElementById("Cities").onchange=function(){
				
				var xmlHttp=createXMLHttpRequest();
				
				xmlHttp.open("POST","<c:url value='/CountiesServlet'/>",true);
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.send("pid="+this.value);
				 xmlHttp.onreadystatechange= function(){
					 if(xmlHttp.readyState==4){
					 if(xmlHttp.status==200){
					 var Countiesselect=document.getElementById("Counties");
					 						
					 var CountiesoptionArray=Countiesselect.getElementsByTagName("option");
					 						
					 						
					 while(CountiesoptionArray.length>1){
					 	Countiesselect.removeChild(CountiesoptionArray[1]);
					 }
					 		var  CountiesArray=eval("("+xmlHttp.responseText+")");
					 						
					 			for(var i=0;i<CountiesArray.length;i++){
					 				var Counties=CountiesArray[i];
					 							 
					 				var optionEle=document.createElement("option");
					 				    optionEle.value=Counties.ID;
					 							   
					 				var textNode=document.createTextNode(Counties.NAME);
					 							
					 				optionEle.appendChild(textNode);
					 				Countiesselect.appendChild(optionEle);
					 			}
					 	     }
					 	}
					  };	
				
				
				
			};
	};
	
 }

</script>

</head>
<body>


<div align="center">
<select name="province" id="province">
<option value="">===请选择===</option>
</select>

<select name="Cities" id="Cities">
<option value="">===请选择===</option>
</select>

<select name="Counties" id="Counties">
<option value="">===请选择===</option>
</select>
</div>

</body>
</html>

总结：
代码借鉴传智播客的黑马程序员_超全面的JavaWeb视频教程
也引用了传智播客的相关工具包，如有侵权，联系本人删除

orzdh
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax案例——省市县/区三级联动选择框
挣钱买房买车的博客
10-06 935
省市区县三级联动，选择下拉框的实现
前端（HTML）——Ajax实现省、市、县联动
qq_52705208的博客
10-23 2159
前端数据、省市联动、Ajax技术、jQuery技术，javaweb，json
Ajax
sigarlin的博客
03-24 147
** Ajax知识点归纳 ** 1.Ajax是什么 “Asynchronous Javascript And XML”（异步JavaScript和XML） Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑...
AJAX+JSON 实现省市县地名三级联动
侯春强的博客
10-13 1899
AJAX+JSON  实现省市县地名三级联动 本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为Oracle数据库，在数据库中创建一张名为address的数据表。具体字段和插入的数据如下 address.sql [sql] view plain copy "font-family
Ajax实现省市联动效果
11-08
Ajax是一个局部刷新技术，现在已经被广泛使用，其中就包括使用Ajax实现省市联动效果。
jQuery ajax实现省市县三级联动
10-20
主要为大家详细介绍了jQuery ajax实现省市县三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
java+ajax+mysql实现省市县三级联动
05-21
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库...
jquery+ajax实现省市区三级联动效果简单示例
10-20
主要介绍了jquery+ajax实现省市区三级联动效果,结合实例形式分析了jQuery结合ajax实现省市区三级联动功能的具体步骤与相关操作技巧,需要的朋友可以参考下
php+ajax+mysql省市县三级联动(1张数据库).zip
06-06
本资源用PHP和mysql+ajax所写，打开导入数据库就能运行。 是大家学习的好帮手。适合新手学习，代码浅显易读，数据库文件设计也比较合理，囊括了所有的地区，希望对大家学习有帮助
AJAX实现省市县三级联动
自由&不束缚的博客
05-07 634
最近在学AJAX做到这个省市县三级联动的案例，这里只是讲一下ajax请求的一些知识，对服务端数据.php文件就不叙述了。 （tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现） 效果图 首先准备两个服务端文件，另一个文件太长，这里就不导入了 selsect.php <?php /* 省市县后台数据接口 接口调用规则： 1.参数一：flag，...
vue + elementUI实现省市县三级联动的方法示例
12-13
本文介绍了vue + elementUI实现省市县三级联动的方法示例，分享给大家，具体如下：   1、首先需要准备省市县json文件，网上有很多可以下载。项目中使用的city.json数据是这样的格式： [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label": "北京市", "children": [ { "value": "110101", "label": "东城区" }, {
ajax实现省市县三级联动
01-07
在做开发的时候我们难免会用到省市县三级联动的功能，所以我写了一个用ajax实现省市县三级联动。希望可以帮到你们，里面的代码我都注释的非常详细。有看不懂地方可以给我留言
一个ajax实现城市三级联动
zh624040645的博客
03-07 171
html： <select name="fang_province" id="" style="width: 150px;height: 30px;border: 1px solid #ccc" class="shen"> <option value="">省</option> @foreach($list['cityDates'] as $value) <option value="{{$value->id}}">.
jquery ajax实现省市县3级联动
陈家小子
03-07 2529
$(document).ready(function () { var ddlProvince = $("#ddlProvince"); var ddlCity = $("#ddlCity"); var ddlCounty = $("#ddlCounty"); LoadData(0, "", ddlPr
ajax 下拉框连动选择省市县
cyh
12-16 1452
效果如下， 用来bootstrap的下拉组件在页面中首先隐藏市和县的div, 然后ajax自动请求一次数据获取省份， 监听省份下拉框的更改事件，再一次ajax获取市数据， show市下拉框， 同样道理， 监听市下拉框的更改事件，再一次ajax获取县数据主界面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%
ajax 实现 省市区 三级联动
m0_57550795的博客
01-02 563
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省市区三级联动</title> <style type="text/css"> select{ width: 200px; } </style> <scrip.
绝对一看就懂的jsp三级级联
specialty_make的专栏
11-30 963
的三级级联：                             前两天有一个网友（刚参加工作）找我问jsp三级联的问题 ,其实这也比较简单（我让他到网上找一下，他说找的东不怎么看的懂），想着别人也不容易，也就帮他一下吧，当时我也就草写了一点代码，今天想了一下，可能还有这样需要的朋友，所以就把这代码帖出来供需要的人借鉴。在这里我先不多说废话，我们先看一个最为简单的 JSP 例子，我们通过该
ajax实现省市区三级联动
最新发布
05-18
Ajax 是一种可以在不重新加载整个页面的情况下，实现异步数据传输的技术，可以在三级联动中使用。 实现步骤如下： 1. 在 HTML 中定义三个 select 下拉框，分别表示省、市、区。 2. 使用 Ajax 技术，发送请求到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值