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、逻辑层servicepackage 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、写前端页面省： 市： 区： 办事处： 居委会：
这里在页面加载的时候就把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(""); }); }, 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(""); }); 同时还可以直接通过.post的父方法.post的父方法.ajax来获取后台的数据，他们的形式很像，只是换了一种形式而已，$.ajax换成了JSON格式，
var data = eval(“(“+data+”)”);这里从数据库返回的数据需要用eval来解析返回JSON对象 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 但是为什么eval()里面还需要添加括号呢，前台用jQuery提交数据，后台从jquery请求中获得参数，然后去查询数据库，把查询结果包装成JSON对象返回，在jquery中解析JSON结果 参考博客*由于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对象，然后遍历返回的数据datajquery的遍历方法
.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方法的几种常用的用法参考博客：
Js代码 var arr = [ “one”, “two”, “three”, “four”]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为：one,two,three,fourvar 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 7var 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(""); }); 本来应该是province.append("")但是这里的area.code为字符串，需要打引号rovince.append("")由于是变量rovince.append("") 那么到这里我们就已经把省份添加到第一个select框里面去了
这里传入的参数为layer=1，code=this.value 添加的时候选中的当前的option，这里的this表示谁调用我我就是谁，this就表示当前的option