1、连接数据库util
package com.zt.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ResourceBundle;
public class DBUtil {
private static ResourceBundle rb = ResourceBundle.getBundle("jdbc");
static{
try {
Class.forName(rb.getString("driver"));
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection(){
Connection con = null;
try {
con = DriverManager.getConnection(rb.getString("url"),rb.getString("user"), rb.getString("pwd"));
} catch (SQLException e) {
e.printStackTrace();
}
return con;
}
public static void closeAll(ResultSet rs , Statement st,Connection con){
try {
if(rs!=null)
rs.close();
if(st!=null)
st.close();
if(con!=null)
con.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
2、准备实体类
package com.zt.entity;
import java.io.Serializable;
public class Area implements Serializable {
private static final long serialVersionUID = 1L;
private String code;
private String name;
private int layer;
public Area(String code, String name, int layer) {
super();
this.code = code;
this.name = name;
this.layer = layer;
}
public Area() {
super();
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getLayer() {
return layer;
}
public void setLayer(int layer) {
this.layer = layer;
}
@Override
public String toString() {
return "Area [code=" + code + ", layer=" + layer + ", name=" + name
+ "]";
}
}
3、数据库操作DAO
要实现五级联动，那么就要查出省，市，区县，镇，街道
每一级都需要两个定位，一个layer，一个code
–省
select * from area where layer =1 ;
–市
select * from area where layer=2 and code like ‘50%’;
–县
select * from area where layer=3 and code like ‘5001%’;
–镇
select * from area where layer=4 and code like ‘500101%’;
–街道
select * from area where layer=5 and code like ‘500101001%’;
这里通过DAO方法来实现每一级的查询方法，将layer和code作为参数传递进去
String sql = “select code,name,layer from area where layer=? and code like ?||’%’ “;
前面的问号是我们需要传递进去的值，问号表示一个字符串，这里设计到SQL语句中字符串的拼接，需要用||,这里的%是一个字符串，
package com.zt.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.zt.entity.Area;
import com.zt.util.DBUtil;
public class AreaDAO {
private ResultSet rs = null;
private PreparedStatement ps = null;
private Connection con = null;
/**
* 5级联动地址通用方法
* @param area layer等级 code代码
* @return 返回对应的数据
*/
public List getAreaInfo(**Area areaParame**){
List areas = new ArrayList();
Area area = null;
con = DBUtil.getConnection();
String sql = "select code,name,layer from area where layer=? and code like ?||'%' ";
try {
ps = con.prepareStatement(sql);
ps.setInt(1, areaParame.getLayer());
ps.setString(2, areaParame.getCode());
rs = ps.executeQuery();
while(rs.next()){
area = new Area(rs.getString("code"), rs.getString("name"), rs.getInt("layer"));
areas.add(area);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
DBUtil.closeAll(rs, ps, con);
}
return areas;
}
}
预处理
**ps.setInt(1, areaParame.getLayer());
ps.setString(2, areaParame.getCode());**
这里预处理设置参数的时候，需要传递layer和code进去，所以这里我们直接传递一个对象进去，用于获取到对应的layer和code
4、逻辑层service
package com.zt.service;
import java.util.List;
import com.zt.dao.AreaDAO;
import com.zt.entity.Area;
public class AreaService {
private AreaDAO ad = new AreaDAO();
/**
* 通用
* @param areaParame
* @return
*/
public List getAreaInfo(Area areaParame){
return ad.getAreaInfo(areaParame);
}
}
到这里后台的准备工作我们就做好了，那么我们现在只需要将后台的数据传递到前端
5、写前端页面
<body onload="loadBasic(1,this.value);">
省：<select onchange="loadBasic(2,this.value);"><option>==请选择==option>select>
市：<select onchange="loadBasic(3,this.value);"><option>==请选择==option>select>
区：<select onchange="loadBasic(4,this.value);"><option>==请选择==option>select>
办事处：<select onchange="loadBasic(5,this.value);"><option>==请选择==option>select>
居委会：<select><option>==请选择==option>select>
body>这里在页面加载的时候就把layer=1的省查出来，
可以用js方法来写页面的加载事件
function loadProvince(layer,code){
$.post("areaServlet", { layer:layer,code:code },function(data){
console.log(data);
},"json");
$.ajax({
type:"POST",
url:"areaServlet",
data:{ layer:layer,code:code },
dataType:"json",
success:function(data){
//var data = eval("("+data+")");
//$(data).each(function(){});
//把获取的数据通过dom方式添加到下拉选择框中
var province = $("select").first();
$.each(data,function(index,area){
province.append("+area.name+"");
});
},
error:function(){
alert("失败");
}
});这里利用Ajax来获取数据库的对象
.post(url,[data],[callback],[type])说明：这个函数跟.post(url,[data],[callback],[type])说明：这个函数跟.get()参数差不多，多了一个type参数，type为请求 的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就 和$.get()返回的格式一样，都是字符串的
$.post("areaServlet", { layer:layer,code:code },function(data){
console.log(data); },"json");
这里的意思是请求数据的地址为servlet，前端页面通过js的Ajax方法向servlet中请求后台的数据，然后中间{ layer:layer,code:code }为请求数据的列表，也就是具体的内容，因为这里的页面加载事件需要传递两个参数，layer和code，这里请求的是一个JSON对象，然后function(data){console.log(data); }这里为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。这里是将后台的数据通过参数data返回回来，我们可以通过console.log打印出返回的JSON格式的数据，$.ajax({
type:"POST",
url:"areaServlet",
data:{ layer:layer,code:code },
dataType:"json",
success:function(data){
//var data = eval("("+data+")");
//$(data).each(function(){});
//把获取的数据通过dom方式添加到下拉选择框中
var province = $("select").first();
$.each(data,function(index,area){
province.append("+area.name+"");
});
同时还可以直接通过.post的父方法.post的父方法.ajax来获取后台的数据，他们的形式很像，只是换了一种形式而已，$.ajax换成了JSON格式，
var data = eval(“(“+data+”)”);这里从数据库返回的数据需要用eval来解析返回JSON对象
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
但是为什么eval()里面还需要添加括号呢，前台用jQuery提交数据，后台从jquery请求中获得参数，然后去查询数据库，把查询结果包装成JSON对象返回，在jquery中解析JSON结果
参考博客http://www.cnblogs.com/myjavawork/archive/2011/03/10/1979279.html
*由于json是以”{}”的方式来开始以及结束的，在js中，它会被
当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式
（expression）转化为对象，而不是作为语句（statement）来执行。*
举一个例子，例如对
象字面量{}，如若不加外层的括号，那么eval会将大括号识别为javascript代码块的开始和
结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
alert(eval(“{}”); // return undefined
alert(eval(“({})”);// return object[Object]
对于这种写法，在JS中，可以到处看到。
如: (function()) {}(); 做闭包操作时等。
所以这里
var data = eval(“(“+data+”)”)——>”(” 和 “)”当作两个字符串拼接返回的JSON对象—–》相当于在{}外面添加了（{}）
这里的data是一个DOM对象，还需要转为jQuery对象，然后遍历返回的数据data
jquery的遍历方法
.each()和.each()和().each
**总结：
.each(arr,function()alert（this）)—−>一维数组这里的this表示每一个元素.each(arr,function()alert（this）)—−>一维数组这里的this表示每一个元素.eahc( arr, function( i, item){ alert( item[i]) } )—->二维数组
这里的item表示每一个元素。i表示每一个元素里面的元素的下标**
下面提一下jQuery的each方法的几种常用的用法
参考博客：http://www.cnblogs.com/zzcit/p/5695172.html
Js代码
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4
().each在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用().each在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用().each来处理多个checkbook，
我们向数据查询到所有的省份城市，然后数据库通过JSON对象返回回来，我们也通过eval进行了JSON对象的解析，经过eval解析，现在不是JSON对象，而是一个个的object的对象。相当于一个一维数组。那么现在我们需要将返回的所有省都添加到province的select里面的每一个option里面
//把获取的数据通过dom方式添加到下拉选择框中
var province = $("select").first();----》通过jQuery选择器选择标签select的第一个元素
$.each(data,function(index,area){----》对返回对象进行遍历，这里的index表示每一个对象的每一个元素的的下标，这里相当于一个一维数组，index表示每一个area对象的下标
province.append("+area.name+"");
});本来应该是province.append("+">"+area.name+"")
但是这里的area.code为字符串，需要打引号
rovince.append("+area.name+"")
由于是变量
rovince.append("+area.name+"")那么到这里我们就已经把省份添加到第一个select框里面去了
这里传入的参数为layer=1，code=this.value
添加的时候选中的当前的option，这里的this表示谁调用我我就是谁，this就表示当前的option