`

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

三级联动jqueryjavascriptextjsjsp 
阅读更多

方法一：（纯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);
    }
    
}

 

分享到：
| slf4j 1.6.1---1.6.4下载地址
评论
1 楼 leighton11 2014-01-08  
楼主的数据库文件哪里去了啊！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】：“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术，并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的，提供...

    基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档

    基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档 软件技术栈 前端：ExtJs4.0（JavaScript的一个框架）,大数据展示用到Echarts 后端：SpringBoot, JPA 数据库：Mysql5.7 开发环境：...

    Extjs4.0+MVC模式+存动态加载

    ExtJS 4.0 是一个强大的JavaScript框架，用于构建富客户端Web应用程序。它引入了全新的MVC（Model-View-Controller）设计模式，这使得应用的结构更加清晰，代码更易于管理和维护。在这个主题中，我们将深入探讨如何...

    JSP + Servlet + ExtJS实现CRUD操作

    本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...

    Struts+Extjs4.0实例

    Struts是一个基于MVC（Model-View-Controller）架构的开源框架，主要用于构建企业级的Java Web应用程序，而ExtJS4.0则是一个强大的JavaScript库，用于构建富客户端的用户界面。两者结合可以实现后端业务逻辑与前端...

    extjs4.0+ssh系统框架

    EXTJS4.0和SSH（Struts2、Hibernate、Spring）是两种常见的Web开发技术，它们结合使用可以构建高效、功能丰富的企业级应用系统框架。EXTJS4.0是一款强大的JavaScript库，主要用于创建桌面级别的富客户端应用，而SSH...

    EXTJS4.0视频教程配套代码

    第三讲:extjs4.0数据模型--Model(附件较大做了分包压缩大家只要下载2个包运行001就ok了) [03]EXTJS4.0数据模型-Model.001.zip (70.00M)[03]EXTJS4.0数据模型-Model.002.zip (57.37M) 第四讲:extjs4.0的数据代理-...

    ssh+extjs4.0grid增删改查

    在"ssh+extjs4.0grid增删改查"这个主题中，我们将深入探讨如何将SSH框架与Ext JS 4.0 Grid集成，实现数据的CRUD（Create, Read, Update, Delete）功能。 1. **Struts2整合Hibernate**： - 配置Struts2-Hibernate...

    ExtJS4.0中文版API

    ExtJS4.0中文版帮助文档，API帮助手册！

    Jquery-Extjs4.0框架

    jQuery和Ext JS是两种广泛应用于前端开发的JavaScript框架，它们各自有着独特的特性和优势。本篇将详细探讨这两个框架在Jquery-Extjs4.0中的结合使用及其核心概念。 **jQuery框架** jQuery是一个轻量级、高性能的...

    ssh+extjs4.0的项目

    4. **ExtJS4.0**：这是一个JavaScript库，用于创建复杂的、桌面级的Web应用界面。它包含丰富的组件库，如表格、图表、窗口、表单等，支持拖放、布局管理、数据绑定等特性。ExtJS4.0引入了新的架构，提高了性能，并...

    ExtJs4.0 手册中文版

    ExtJS是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了丰富的组件库，包括数据网格、表单、菜单、工具栏等，使得开发者能够创建具有桌面应用般用户体验的Web应用。ExtJS 4.0是该...

    ExtJs4.0官方版本

    ExtJS 4.0是Sencha公司开发的一款强大的JavaScript前端框架，主要用于构建富客户端Web应用程序。这个官方版本的发布标志着ExtJS在功能、性能和可维护性方面的一个重要里程碑。以下将详细介绍ExtJS 4.0中的核心概念、...

    ssh框架+extjs4.0grid实例

    ExtJS 4.0是一款强大的JavaScript库，主要用于构建富客户端应用。它提供了一套完整的组件模型，包括Grid、Form、Tree等，用于构建丰富的用户界面。在这个实例中，Grid组件被用来展示数据，它能动态加载数据，支持...

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    jSP+EXTJS实现upload

    在IT行业中，网页开发经常会遇到文件上传的需求，而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分：JavaServer Pages (JSP) 和 ExtJS，它们共同用于创建一个具有文件...

    最好用的通用后台管理extjs+MySQL+oracle+SQL server数据库源码

    这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码：主要运用了一下的知识： 1、主要运用的后台框架是extjs， 2、jsp+hibernate+Struts2+spring+ajax+jQuery， 3、用到了Java面向对象的...

    extjs+servlet+json简单应用

    在这个“extjs+servlet+json简单应用”中，我们将探讨如何将这三个技术结合使用，构建一个简单的Web应用。 首先，我们需要理解ExtJS如何与后端进行通信。ExtJS中的Ajax类提供了与服务器交互的能力，它支持发送GET和...

    extJs4.0 开发手册源码

    EXTJS4.0是Sencha公司推出的一款强大的JavaScript前端框架，专用于构建富客户端Web应用程序。这个"EXTJS4.0开发手册源码"包含了EXTJS4.0框架的源代码，以及与其配套的开发指南，是深入理解EXTJS4.0内部机制和进行...

Magicbox
Global site tag (gtag.js) - Google Analytics