z_p_h
- 浏览: 65973 次
-
文章分类
最新评论
省市县三级连动三种实现方式（javascript+jsp+servlet）、（jquery+jsp+servlet）、（extjs4.0+jsp+servle）
- 博客分类：
- we实用功能总结
方法一：（纯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);
}
}
- three_level_link.zip (1.8 MB)
- 下载次数: 106
分享到：
发表评论
相关推荐
第三讲:extjs4.0数据模型--Model(附件较大做了分包压缩大家只要下载2个包运行001就ok了) [03]EXTJS4.0数据模型-Model.001.zip (70.00M)[03]EXTJS4.0数据模型-Model.002.zip (57.37M) 第四讲:extjs4.0的数据代理-...
Extjs4.0+MVC模式+存动态加载,动态加载面板，动态加载控制器，动态加载树叶子节点，后台servlet模拟json数据
基于SpringBoot+ExtJs4.0+Echarts实现的出租房屋管理系统源代码+数据库+项目文档 软件技术栈 前端：ExtJs4.0（JavaScript的一个框架）,大数据展示用到Echarts 后端：SpringBoot, JPA 数据库：Mysql5.7 开发环境：...
ExtJs4.0官方版本 ExtJs4.0官方版本 ExtJs4.0官方版本
ssh+extjs4.0grid增删改查， 包太大了都删除掉了！见谅
extjs4.0+ssh系统框架
ExtJS4.0中文版帮助文档，API帮助手册！
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
Spring3.0+Hibernate4.0+SpringMVC整合ExtJS4是一个集成的应用系统，希望对学习javaweb和extjs的朋友有帮助
extjs4.0+extdesign+fullsource+extjs.jsb2的整套开发.
Struts+Extjs4.0实例
(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目
jSP+EXTJS实现upload UploadDialog
Jquery-Extjs4.0框架,用于前台页面开发的JS框架
ssh+extjs4.0grid删除数据实例，包没有了大家把包下载下来！ 我的资源中有extjs的依赖包！
Hibernate+Struts2+ExtJs4.0，采用json做数据传输做的小例子
struts2+extjs4.0小项目grid显示数据 自己做的一个小实例绝对可以运行的项目！
Extjs4.0终极教程+案例源码(超详细，针对4.0) 目前最为卓越的4.0教程，还附加案例源码。白~吃，也能学会用extjs做页面
ExtJS4.0开发笔记