省市县三级连动三种实现方式（javascript+jsp+servlet）、（jquery+jsp+servlet）、（extjs4.0+jsp+servle）...

最新推荐文章于 2024-09-06 13:23:10 发布
原创 最新推荐文章于 2024-09-06 13:23:10 发布 · 200 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#三级联动 #jquery #javascript #extjs #jsp #ViewUI

本文介绍了一种使用javascript、jquery和extjs实现的三级联动省市区县数据加载方式，包括请求处理、数据源加载及展示。同时提供了后台代码实现，通过SQL查询数据库获取数据并返回JSON格式。

方法一：（纯javascript+jsp+servlet）

<script type="text/javascript">

var request = getRequest();

	
	function getRequest(){
		var request;
		if(window.XMLHttpRequest){
			request =  new XMLHttpRequest();
			//alert("xmlRequestHttp");
			
		}
		else{
			request = new ActiveXObject("Microsoft.XMLHTTP");
			alert("xobject");
		}
		return request;	
	}
	

	function fun_init(){
	//	alert("init");
		var url = '<%=request.getContextPath()%>/CityLinkServlet?level=1';
		request.open('POST',url,true);
		request.onreadystatechange = show_province;
		request.send(null);
	}
	
	
	function change_province(_level,_code){
		//alert(_level);
		var url = '<%=request.getContextPath()%>/CityLinkServlet?level='+_level+'&code='+_code;
		request.open('POST',url,true);
		request.onreadystatechange = show_city;
		request.send(null);
	}
	
	
	function change_city(_level,_code){
		//alert(_level);
		var url = '<%=request.getContextPath()%>/CityLinkServlet?level='+_level+'&code='+_code;
		request.open('POST',url,true);
		request.onreadystatechange = show_county;
		request.send(null);
	}
	
	function show_province(){
		if(request.readyState == 4){
			if(request.status == 200){
				var ret  = request.responseText;
				var jsonObj = eval("("+ret+")");			
				//alert(jsonObj.data.length);
				//alert(document.getElementById("province"));
				var obj = document.getElementById("province");
				for(var i=0;i<jsonObj.length;i++){
					var item = new Option(jsonObj[i].name,jsonObj[i].code);
					obj.options.add(item);
				}
				
			}
		}
	}
	
	
	function show_city(){
		if(request.readyState == 4){
			if(request.status == 200){
				var ret  = request.responseText;
				var jsonObj = eval("("+ret+")");
				var obj = document.getElementById("city");
				obj.options.length = 1;
				for(var i=0;i<jsonObj.length;i++){
					var item = new Option(jsonObj[i].name,jsonObj[i].code);
					obj.options.add(item);
				}
			}
		}
	}
	
	function show_county(){
		//alert(request);
		if(request.readyState == 4){
			if(request.status == 200){
				var ret  = request.responseText;
				var jsonObj = eval("("+ret+")");
				var obj = document.getElementById("county");
				obj.options.length = 1;
				for(var i=0;i<jsonObj.length;i++){
					var item = new Option(jsonObj[i].name,jsonObj[i].code);
					obj.options.add(item); 
				}
				//alert(jsonObj.data.length);
			}
		}
	}
	
</script>

</head>
<body onload="fun_init()">
	<div>
		<label>省</label>
		<select id="province" onchange="change_province(2,this.value)">
			<option value="--">---请选择---</option>
		</select>
		<br/>
		
		<label>市</label>
		<select id="city" onchange = "change_city(3,this.value)">
			<option value="--">---请选择---</option>
		</select>
		<br/>
		
		<label>县</label>
		<select id="county">
			<option value="--">---请选择---</option>
		</select>
		<br/>
	</div>
</body>
</html>

 

方法二：（jquery+jsp+servlet）

<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery-1.7.1.js"></script>

<script type="text/javascript">
	$(function(){
		
		var $province = $("#province");
		var $city = $("#city");
		var $county = $("#county");
		
		//省份选择框变化处理函数
		$province.change(function(){
			//alert($province.val());
			$city[0].options.length = 1;
			$county[0].options.length = 1;
			$.ajax({
				type:'post',
				url:'<%=request.getContextPath()%>/CityLinkServlet',
				dataType:'json',
				data:{level:'2',code:$province.val()},
				success:function(ret){					
					$.each(ret,function(){
						$city.append("<option value="+this.code+">"+this.name+"</option>");
					});
				},
				error:function(){alert("出现未知故障");}
			});
		});
		//市选择框变化处理函数
		$city.change(function(){
		//	alert($city.val());
			$county[0].options.length = 1;
			$.ajax({
				type:'post',
				url:'<%=request.getContextPath()%>/CityLinkServlet',
				dataType:'json',
				data:{level:'3',code:$city.val()},
				success:function(ret){					
					$.each(ret,function(){
						$county.append("<option value="+this.code+">"+this.name+"</option>");
					});
				},
				error:function(){alert("出现未知故障");}
			});
		});
		
		//页面加载完毕查询省份信息
		$.ajax({
			type:"post",
			url:"<%=request.getContextPath()%>/CityLinkServlet",
			data:{level:"1"},
			dataType:"json",
			success:function(ret){
				$.each(ret,function(){
					$province.append("<option value="+this.code+">"+this.name+"</option>");
				});
			},
			error:function(){alert("出现未知故障");}
			
		});
		
		
		
		
	});
	
	
	
</script>

</head>
<body>
	<div>
		<label>省</label>
		<select id="province">
			<option value="--">---请选择---</option>
		</select>
		<br/>
		
		<label>市</label>
		<select id="city">
			<option value="--">---请选择---</option>
		</select>
		<br/>
		
		<label>县</label>
		<select id="county">
			<option value="--">---请选择---</option>
		</select>
		<br/>
	</div>
</body>
</html>

 方法三：（extjs4.0+jsp+servlet）

<%String conPath = request.getContextPath(); %>

<link href="<%=conPath %>/extjs4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=conPath%>/extjs4.0/ext-all.js"></script>
<script type="text/javascript" src="<%=conPath%>/extjs4.0/ext-lang-zh_CN.js"></script>


<script type="text/javascript">
	Ext.require("Ext.*");
	Ext.onReady(function(){
		//定义combox模型
		Ext.define('State',{
			extend:'Ext.data.Model',
			fields:[
			        {type:'string',name:'code'},
			        {type:'string',name:'name'}
			        ]
		});
		
		//加载省数据源
		var province_store = Ext.create('Ext.data.Store',{
			model:'State',
			proxy:{
				type:'ajax',
				url:'<%=request.getContextPath()%>/CityLinkServlet?level=1'
			},
			autoLoad:true,
			remoteSort:true
		});
		//加载市数据源
		var city_store = Ext.create('Ext.data.Store',{
			model:'State',
			proxy:{
				type:'ajax',
				url:'<%=request.getContextPath()%>/CityLinkServlet?level=2'
			},
			autoLoad:false,
			remoteSort:true
		});
		//加载县数据源
		var county_store = Ext.create('Ext.data.Store',{
			model:'State',
			proxy:{
				type:'ajax',
				url:'<%=request.getContextPath()%>/CityLinkServlet?level=3'
			},
			autoLoad:false,
			remoteSort:true
		});
		//创建显示面板
		Ext.create('Ext.panel.Panel',{
			renderTo:document.body,
			width:300,
			height:220,
			title:'省市县三级联动',
			plain:true,
			margin:'30 10 50 80',
			bodyStyle:'padding:45px,15px,15px,15px',
			defaults:{
				autoScroll:true,
				bodyPadding:10
			},
			items:[{
				xtype:'combo',
				name:'province',
				id:'province',
				fieldLabel:'选择省',
				displayField:'name',
				valueField:'code',
				store:province_store,
				triggerAction:'all',
				queryMode:'local',
				//selectOnFocus:true,
				forceSelection:true,
				allowBlank:false,
				editable:false,
				emptyText:'--请选择省--',
				blankText:'--请选择省--',
				listeners:{
					select:function(combo,record,index){
						//alert(this.value);
						try{
							var cityObj = Ext.getCmp('city');
							cityObj.clearValue();
							cityObj.store.load({params:{code:this.value}});
						}catch(ex){
							Ext.MessageBox.alert("错误","数据加载失败");
						}
					}
				}
			},
			       {
					xtype:'combo',
					name:'city',
					id:'city',
					fieldLabel:'选择市',
					displayField:'name',
					valueField:'code',
					store:city_store,
					triggerAction:'all',
					queryMode:'local',
					//selectOnFocus:true,
					forceSelection:true,
					allowBlank:false,
					editable:false,
					emptyText:'--请选择市--',
					blankText:'--请选择市--',
					listeners:{
						select:function(combo,record,index){
							try{
								var countyObj = Ext.getCmp('county');
								countyObj.clearValue();
								countyObj.store.load({params:{code:this.value}});
							}catch(ex){
								Ext.MessageBox.alert("错误","数据加载失败");
							}
						}
					}
			       },
			       {
			    	   xtype:'combo',
						name:'county',
						id:'county',
						fieldLabel:'选择县',
						displayField:'name',
						valueField:'code',
						store:county_store,
						triggerAction:'all',
						queryMode:'local',
						//selectOnFocus:true,
						forceSelection:true,
						allowBlank:false,
						editable:false,
						emptyText:'--请选择县--',
						blankText:'--请选择县--'
			       }]
		
		});
		
		
		
	});
</script>

</head>
<body>
	
</body>
</html>

 后台代码：

package com.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

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

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.util.DBUtil;

/**
 * Servlet implementation class CityLink
 */
public class CityLinkServlet extends HttpServlet
{
    private static final long serialVersionUID = 1L;

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException,
            IOException
    {
        System.out.println("----in ---service");
        String level = request.getParameter("level");
        System.out.println("level=========="+level);
        String code = request.getParameter("code");
        System.out.println("code========"+code);

        String sql = null;

        if ("1".equals(level))
        {
            sql = "select dm,mc from city where dm like '%0000' order by dm";
            deal(sql, response);
        }
        else if ("2".equals(level))
        {
            sql = "select dm,mc from city where dm like '" + code.substring(0, 2) + "%00' and dm != '" + code
                    + "' order by dm";
            deal(sql, response);
        }
        else if ("3".equals(level))
        {
            sql = "select dm,mc from city where dm like '" + code.substring(0, 4) + "%' and dm != '" + code
                    + "' order by dm";
            deal(sql, response);
        }
        else
        {

        }

    }

    public void deal(String sql, HttpServletResponse response)
    {
        Connection conn = DBUtil.getConnection();
        ResultSet rs = null;
        PreparedStatement pst = null;
        try
        {
            pst = conn.prepareStatement(sql);
            rs = pst.executeQuery();
            JSONArray jsonArray = new JSONArray();
            JSONObject jsonObject = null;
            int i = 0;
            while (rs.next())
            {
                jsonObject = new JSONObject();
                jsonObject.put("code", rs.getString(1)).put("name", rs.getString(2));
                jsonArray.put(i++, jsonObject);
            }
            JSONObject jsonObject2 = new JSONObject();
            jsonObject2.put("data", jsonArray);
            response.setCharacterEncoding("utf-8");
            response.getWriter().println(jsonArray);
            //response.getWriter().println(jsonObject2);
            System.out.println(jsonArray.toString());
        }
        catch (SQLException e)
        {
            e.printStackTrace();
        }
        catch (JSONException e)
        {
            e.printStackTrace();
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        finally
        {
            DBUtil.close(conn, pst, rs);
        }
    }

}

 DButil。java

package com.util;

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 java.util.ResourceBundle;


public class DBUtil
{
    
    
    private static  String driverClassName ;
    private static String username;
    private static String password;
    private static String url;
    
    private static ResourceBundle bundle = ResourceBundle.getBundle("jdbc-mysql");
    
    static{
        driverClassName = bundle.getString("driverClassName").trim();
        username = bundle.getString("username").trim();
        password = bundle.getString("password").trim();
        url = bundle.getString("url").trim();
        try
        {
            Class.forName(driverClassName);
        }
        catch (ClassNotFoundException e)
        {
            // TODO Auto-generated catch block
            System.out.println("找不到jdbc驱动包");
            e.printStackTrace();
        }
    }
    
    public static Connection getConnection(){
        Connection conn = null;
        try
        {
            conn = DriverManager.getConnection(url, username, password);
        }
        catch (SQLException e)
        {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return conn;
    }
    
    public static void close(Connection conn){
        if(conn!=null){
            try
            {
                conn.close();
            }
            catch (SQLException e)
            {
                // TODO Auto-generated catch block
                e.printStackTrace();
                conn = null;
            }
            conn = null;
        }
    }
    
    public static void close(Statement stmt){
        if(stmt!=null){
            try
            {
                stmt.close();
            }
            catch (SQLException e)
            {
                // TODO Auto-generated catch block
                e.printStackTrace();
                stmt = null;
            }
            stmt = null;
        }
    } 
    public static void close(PreparedStatement pst){
        if(pst!=null){
            try
            {
                pst.close();
            }
            catch (SQLException e)
            {
                // TODO Auto-generated catch block
                e.printStackTrace();
                pst = null;
            }
            pst = null;
        }
    } 
    public static void close(ResultSet  rs){
        if(rs!=null){
            try
            {
                rs.close();
            }
            catch (SQLException e)
            {
                // TODO Auto-generated catch block
                e.printStackTrace();
                rs = null;
            }
            rs = null;
        }
    }
    
    public static void close(Connection conn,java.sql.PreparedStatement stmt){
        close(stmt);
        close(conn);
    }
    public static void close(Connection conn,java.sql.PreparedStatement pst,ResultSet rs){
        close(rs);
        close(pst);
        close(conn);
    }
    public static void close(Connection conn,Statement stmt){
        close(stmt);
        close(conn);
    }
    public static void close(Connection conn,Statement stmt,ResultSet rs){
        close(rs);
        close(stmt);
        close(conn);
    }
    
}

 

省市区三级联动（拼接写法）
kallenAB的博客
07-28 3892
省市区三级联动
原生js实现简单的省市区联动效果
沐小侠
11-03 3831
省市区实现思路： ① 一维数组 provinces 保存省、自治区和直辖市。 ② 二维数组 cities 保存对应省、自治区和直辖市下的所有城市，存储时要保证 cities[index]中 index 值与对应 provinces 中元素的下标索引相同。 ③ 同理，利用三维数组保存每个城市下的区域的所有区域。 ① 创建 HTML 表单，实现省份、城市、区域的下拉列表。 ② 创建数组保存省份城市区域的数据。 ③ 编写函数 createOption()用于创建指定下拉菜单的选项。
【JSP】ajax实现省市县三级级联
景谦Nice的博客
12-06 587
需求： 我们要实现的界面如上图，具体需求如下： 省、市、县/区数据从数据库读取； 选择省份后，该省对应的市添加在“请选择市”的下拉列表中供用户选择； 选择市后，该市对应的县/区添加在“请选择县/区”的下拉列表中供用户选择； 没有选择省份时，无法选择市、县/区； 没有选择市时，无法选择县/区； 切换省份时，后面的市、县/区恢复无选择状态； 切换市时，后面的县/区恢复无选择状态。 数据准备： 打...
通过jsp实现省市区县四级联动菜单
热门推荐
06-29 5万+
【所要达到的效果如下】【代码如下】Area.jsp&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
JQuery+Ajax实现省市区三级联动（附效果图+数据库）
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
省市县三级连动三种实现方式（javascript+jsp+servlet）、（jquery+jsp+servlet）、（extjs4.0+jsp+servle）
04-05
三种实现方式分别涉及到JavaScript、jQuery和ExtJS4.0这三种前端框架，结合jsp和servlet进行后端处理。 1. **JavaScript+jsp+servlet实现**： 在JavaScript中，可以通过AJAX异步请求后端servlet来获取数据。用户在...
(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip
12-08
【标题】：“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术，并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的，提供...
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
10-29
本文将介绍如何在***环境下，使用***自身的控件、JQuery以及ExtJs三种不同的框架来实现省市三级联动。 首先，需要明确***中的数据模型。AreaModel.cs文件定义了地区类Area，它包括地区编号Area_ID、地区名称Area_...
基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档
09-14
基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档 软件技术栈 前端：ExtJs4.0（JavaScript的一个框架）,大数据展示用到Echarts 后端：SpringBoot, JPA 数据库：Mysql5.7 开发环境：...
JSP + Servlet + ExtJS实现CRUD操作
03-16
本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...
JSP结合jQuery实现省市区三级联动有SQL数据
12-25
最新数据库，没有兼容性问题，现在自用，推荐下载哦
国家城市二级联动jsp页面
jeo_chow的博客
08-10 1061
<% String basePath = request.getContextPath(); pageContext.setAttribute("basePath", basePath); %> "> ajax异步选择城市 //页面加载完毕，然后执行 window.onload=function(){
JSP省市区三级联动下拉选
qigc_0529的博客
08-25 1万+
JSP+Jquery+Oracle实现省市区三级联动下拉选菜单 自己搞了一下午,刚开始觉得还有点麻烦,不过搞过一遍之后就觉得简单了,供大家互相学习,具体代码如下: 1.jsp页面代码： 所在地: 请选择
实现JSP与jQuery的省市区三级联动系统
最新发布
weixin_32251525的博客
09-06 1568
本文还有配套的精品资源，点击获取 简介：本文介绍如何利用Java Server Pages (JSP) 和 jQuery 技术实现动态的省市区三级联动下拉菜单，结合SQL数据库提供数据。内容涵盖JSP动态网页生成、jQuery的DOM操作与Ajax交互、数据源的准备、数据库设计以及前后端交互流程。同时强调了测试与数据缓存的重要性，以提升用户体验和系统性能。 1. ...
jsp省市区三级联动
weixin_45285459的博客
02-11 1031
1.添加使用.jar c3p0-0.9.5.5.jar commons-dbutils-1.7.jar fastjson-1.2.62.jar jstl-1.2.jar mchange-commons-java-0.2.19.jar mysql-connector-java-8.0.17.jar 2.创建数据库： CREATE TABLE `provice` ( `id` int(11) N...
jsp+jquery实现省市区三级联动下拉
passport_daizi的博客
09-12 1万+
不少系统都需要实现省市区三级联动下拉，像人口信息管理、电子商务网站、会员管理等，都需要填写地址相关信息。而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验，目前基本上所有网站都是采用这一种方式。现在ajax的使用已经不像最初那样使用最原始的方法了，因为有很多的js框架供我们选择，我们只需要调用它们的一个方法就可以实现ajax功能，而其他的则交给js组件去完成。   最近整理了
jsp省市区3级联动
qq_36367462的博客
05-22 1064
[javascript] view plain copy&lt;/pre&gt;&lt;pre name="code" class="html"&gt;&lt;tr&gt;                  &lt;td&gt;所在地:&lt;/td&gt;                  &lt;td&gt;                      &lt;s
JSP+EXTJS+JSON+MySQL构建动态树型结构示例
在本篇中，我们将深入探讨使用JSP结合EXTJS、JSON以及MySQL实现树型结构的相关知识点。JSP（Java Server Pages）是一种基于Java技术，用于开发动态网页的服务器端技术。EXTJS是一个主要用于开发具有丰富用户界面的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值