学步园

这是一个Servlet应用。。

该版本用到了Json-lib工具包，关于Json-lib的使用，请参见我的博文

http://blog.csdn.net/jadyer/archive/2011/02/01/6171659.aspx

首先是web.xml文件

<?xml version="1.0" encoding="UTF-8"?><br /> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"<br /> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"<br /> xsi:schemaLocation="http://java.sun.com/xml/ns/javaee<br /> http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><br /> <servlet><br /> <servlet-name>InitProvinceServlet</servlet-name><br /> <servlet-class>com.jadyer.servlet.InitProvinceServlet</servlet-class><br /> </servlet><br /> <servlet><br /> <servlet-name>GetCityServlet</servlet-name><br /> <servlet-class>com.jadyer.servlet.GetCityServlet</servlet-class><br /> </servlet><br /> <servlet><br /> <servlet-name>GetAreaServlet</servlet-name><br /> <servlet-class>com.jadyer.servlet.GetAreaServlet</servlet-class><br /> </servlet></p> <p> <servlet-mapping><br /> <servlet-name>InitProvinceServlet</servlet-name><br /> <url-pattern>/servlet/InitProvinceServlet</url-pattern><br /> </servlet-mapping><br /> <servlet-mapping><br /> <servlet-name>GetCityServlet</servlet-name><br /> <url-pattern>/servlet/GetCityServlet</url-pattern><br /> </servlet-mapping><br /> <servlet-mapping><br /> <servlet-name>GetAreaServlet</servlet-name><br /> <url-pattern>/servlet/GetAreaServlet</url-pattern><br /> </servlet-mapping></p> <p> <!-- 在version="2.5"中，可以直接在<welcome-file-list>里执行Servlet应用 --><br /> <welcome-file-list><br /> <welcome-file>servlet/InitProvinceServlet</welcome-file><br /> </welcome-file-list><br /> </web-app>

然后是用来显示省市三级联动效果的index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%><br /> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><br /> <style><br /> #area {<br /> background-color: #FFFFC0;<br /> font-size: 12px;<br /> color: green;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> var xmlHTTP = new XMLHttpRequest(); //支持Internet Explorer-8.0.6001.18702</p> <p> function getCitys(provinceID){<br /> //若省份项选中了【==请选择省份==】则清空城市列表数据，并显示【==请选择城市==】<br /> if('0' == provinceID){<br /> clearCitys();<br /> return;<br /> }<br /> xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/GetCityServlet?provinceID='+provinceID, true);<br /> xmlHTTP.onreadystatechange = callbackCitys; //设置回调函数<br /> xmlHTTP.setRequestHeader("if-Modified-Since", "0"); //设置不使用浏览器缓存<br /> xmlHTTP.send(null); //发送请求<br /> }</p> <p> function callbackCitys(){<br /> if(4==xmlHTTP.readyState && 200==xmlHTTP.status){<br /> //此时返回的数据类似于【[{"areas":[],"cityID":4,"cityName":"哈尔滨","description":"著名的冰城","parentID":0},{"areas":[],"cityID":5,"cityName":"佳木斯","description":"传说的贼城","parentID":0},{"areas":[],"cityID":6,"cityName":"双鸭山","description":"满族发源地","parentID":0}]】<br /> var citys = eval(xmlHTTP.responseText);<br /> clearCitys();<br /> var city = document.getElementById("city");<br /> for(var i=0; i<citys.length; i++){<br /> city.options[i+1] = new Option(citys[i].cityName, citys[i].cityID); //new Option(text,value)<br /> }<br /> }<br /> }</p> <p> //清空城市列表数据<br /> function clearCitys(){<br /> var city = document.getElementById('city');<br /> document.getElementById("area").innerHTML = "";<br /> city.length = 0;<br /> city.options[0] = new Option('==请选择城市==', '0');<br /> }</p> <p> function getArea(cityID){<br /> if('0' == cityID){<br /> document.getElementById("area").innerHTML = "";<br /> return;<br /> }<br /> xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/GetAreaServlet?cityID='+cityID, true);<br /> xmlHTTP.onreadystatechange = callbackArea;<br /> xmlHTTP.setRequestHeader("if-Modified-Since", "0");<br /> xmlHTTP.send(null);<br /> }</p> <p> function callbackArea(){<br /> if(4==xmlHTTP.readyState && 200==xmlHTTP.status){<br /> //此时返回的数据类似于【{"areas":[{"areas":[],"cityID":13,"cityName":"巴彦县","description":"我的家乡","parentID":0},{"areas":[],"cityID":14,"cityName":"延寿县","description":"延寿山庄","parentID":0},{"areas":[],"cityID":15,"cityName":"木兰县","description":"慈航古寺","parentID":0}],"cityID":4,"cityName":"哈尔滨","description":"著名的冰城","parentID":0}】<br /> var city = eval('(' + xmlHTTP.responseText + ')');<br /> var msg = "<p><b>" + city.cityName +"市为：" + city.description + "</b><br/>";<br /> if(0 == city.areas.length){<br /> msg += "没有区县";<br /> }else{<br /> msg += "其下有" + city.areas.length + "个区县，依次为：<br/>";<br /> var areas = city.areas;<br /> for(var i=0; i<areas.length; i++){<br /> msg += ("名称：" + areas[i].cityName + "&nbsp;&nbsp;&nbsp;&nbsp;描述：" + areas[i].description + "<br/>");<br /> }<br /> }<br /> msg += "</p>";<br /> document.getElementById("area").innerHTML = msg;<br /> }<br /> }<br /> </script></p> <p>省份：<br /> <select id="province" onchange="getCitys(this.value)"><br /> <option value="0">==请选择省份==</option><br /> <c:forEach items="${requestScope.provinces}" var="province"><br /> <option value="${province.cityID}">${province.cityName}</option><br /> </c:forEach><br /> </select><br />     <br /> 城市：<br /> <select id="city" onchange="getArea(this.value)"><br /> <option>==请选择城市==</option><br /> </select><br /> <div id="area"></div>

然后是用于从数据库执行查询操作的CityDao.java

package com.jadyer.dao;</p> <p>import java.sql.Connection;<br /> import java.sql.PreparedStatement;<br /> import java.sql.ResultSet;<br /> import java.sql.SQLException;<br /> import java.util.ArrayList;<br /> import java.util.List;</p> <p>import javax.naming.Context;<br /> import javax.naming.InitialContext;<br /> import javax.naming.NamingException;<br /> import javax.sql.DataSource;</p> <p>import com.jadyer.model.City;</p> <p>/**<br /> * 这里的代码，应该重构一下，但为了演示方便，就没有重构<br /> */<br /> public class CityDao {<br /> /**<br /> * 根据父ID得到所有一级子类<br /> * @see 如果传递为0，则得到所有根节点<br /> */<br /> public List<City> findByParentID(int parentID){<br /> String sql = "select cityID, cityName, description from city where parentID=?";<br /> List<City> citys = new ArrayList<City>();<br /> try {<br /> Context context = new InitialContext();<br /> //有关jdbc/oracleds连接池的配置，参见http://blog.csdn.net/jadyer/archive/2010/11/10/6001023.aspx<br /> DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds");<br /> Connection conn = ds.getConnection();<br /> PreparedStatement pstmt = conn.prepareStatement(sql);<br /> pstmt.setInt(1, parentID);<br /> ResultSet rs = pstmt.executeQuery();<br /> while(rs.next()){<br /> citys.add(new City(rs.getInt("cityID"), rs.getString("cityName"), rs.getString("description")));<br /> }<br /> } catch (NamingException e) {<br /> e.printStackTrace();<br /> } catch (SQLException e) {<br /> e.printStackTrace();<br /> }<br /> return citys;<br /> }</p> <p> /**<br /> * 根据ID得到该城市的详细信息<br /> */<br /> public City fingByCityID(int cityID){<br /> String sql = "select cityName, description from city where cityID=?";<br /> City city = null;<br /> try {<br /> Context context = new InitialContext();<br /> DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds");<br /> Connection conn = ds.getConnection();<br /> PreparedStatement pstmt = conn.prepareStatement(sql);<br /> pstmt.setInt(1, cityID);<br /> ResultSet rs = pstmt.executeQuery();<br /> while(rs.next()){<br /> city = new City(cityID, rs.getString("cityName"), rs.getString("description"));<br /> }<br /> } catch (NamingException e) {<br /> e.printStackTrace();<br /> } catch (SQLException e) {<br /> e.printStackTrace();<br /> }<br /> return city;<br /> }<br /> }

用于储存City信息的实体类

package com.jadyer.model;</p> <p>import java.util.List;</p> <p>public class City {<br /> private Integer parentID;<br /> private Integer cityID;<br /> private String cityName;<br /> private String description;<br /> private List<City> areas; //新增。。用于储存该城市下所有区县的详细信息</p> <p> /* 五个属性的getter和setter方法略 */</p> <p> public City(){}</p> <p> public City(Integer cityID, String cityName, String description){<br /> this.cityID = cityID;<br /> this.cityName = cityName;<br /> this.description = description;<br /> }<br /> }

用于初始化所有省份信息的InitProvinceServlet.java

package com.jadyer.servlet;</p> <p>import java.io.IOException;</p> <p>import javax.servlet.ServletException;<br /> import javax.servlet.http.HttpServlet;<br /> import javax.servlet.http.HttpServletRequest;<br /> import javax.servlet.http.HttpServletResponse;</p> <p>import com.jadyer.dao.CityDao;</p> <p>@SuppressWarnings("serial")<br /> public class InitProvinceServlet extends HttpServlet {<br /> public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {<br /> CityDao cityDao = new CityDao();<br /> //获取所有省份的信息<br /> request.setAttribute("provinces", cityDao.findByParentID(0));<br /> request.getRequestDispatcher("/index.jsp").forward(request, response);<br /> }<br /> }

用于获取指定省份下的所有城市信息的GetCityServlet.java

package com.jadyer.servlet;</p> <p>import java.io.IOException;<br /> import java.util.List;</p> <p>import javax.servlet.ServletException;<br /> import javax.servlet.http.HttpServlet;<br /> import javax.servlet.http.HttpServletRequest;<br /> import javax.servlet.http.HttpServletResponse;</p> <p>import net.sf.json.JSONArray;</p> <p>import com.jadyer.dao.CityDao;<br /> import com.jadyer.model.City;</p> <p>@SuppressWarnings("serial")<br /> public class GetCityServlet extends HttpServlet {<br /> public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {<br /> response.setContentType("text/html; charset=UTF-8");<br /> int provinceID = Integer.parseInt(request.getParameter("provinceID"));<br /> CityDao cityDao = new CityDao();<br /> //返回该省份下的所有城市的信息<br /> List<City> citys = cityDao.findByParentID(provinceID);<br /> JSONArray jsonObject = JSONArray.fromObject(citys);<br /> response.getWriter().println(jsonObject.toString());<br /> }<br /> }

用于获取指定城市下的所有区县信息的GetAreaServlet.java

package com.jadyer.servlet;</p> <p>import java.io.IOException;<br /> import java.util.List;</p> <p>import javax.servlet.ServletException;<br /> import javax.servlet.http.HttpServlet;<br /> import javax.servlet.http.HttpServletRequest;<br /> import javax.servlet.http.HttpServletResponse;</p> <p>import net.sf.json.JSONObject;</p> <p>import com.jadyer.dao.CityDao;<br /> import com.jadyer.model.City;</p> <p>@SuppressWarnings("serial")<br /> public class GetAreaServlet extends HttpServlet {<br /> public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {<br /> response.setContentType("text/html; charset=UTF-8");<br /> int cityID = Integer.parseInt(request.getParameter("cityID"));<br /> CityDao cityDao = new CityDao();<br /> //得到该城市下所有区县的详细信息的集合<br /> List<City> areas = cityDao.findByParentID(cityID);<br /> //得到当前城市的详细信息<br /> City city22 = cityDao.fingByCityID(cityID);<br /> city22.setAreas(areas);<br /> JSONObject jsonObject = JSONObject.fromObject(city22);<br /> response.getWriter().println(jsonObject.toString());<br /> }<br /> }

最后是数据库脚本文件

--Oracle 11g<br /> --创建表格<br /> create table city(<br /> id number(3) primary key,<br /> parentID number(3), --0表示根节点<br /> cityID number(3),<br /> cityName varchar(20),<br /> description varchar(20)<br /> )</p> <p>--创建序列<br /> create sequence city_sequence increment by 1 start with 1 nomaxvalue nocycle;</p> <p>--添加一级菜单<br /> insert into city values(city_sequence.nextval, 0, 1, '黑龙江', '东北三省的黑龙江省');<br /> insert into city values(city_sequence.nextval, 0, 2, '吉林省', '东北三省的吉林省');<br /> insert into city values(city_sequence.nextval, 0, 3, '辽宁省', '东北三省的辽宁省');<br /> --添加二级菜单<br /> insert into city values(city_sequence.nextval, 1, 4, '哈尔滨', '著名的冰城');<br /> insert into city values(city_sequence.nextval, 1, 5, '佳木斯', '传说的贼城');<br /> insert into city values(city_sequence.nextval, 1, 6, '双鸭山', '满族发源地');<br /> insert into city values(city_sequence.nextval, 2, 7, '长春', '中国汽车之都');<br /> insert into city values(city_sequence.nextval, 2, 8, '辽源', '中国琵琶之乡');<br /> insert into city values(city_sequence.nextval, 2, 9, '通化', '中国医药之城');<br /> insert into city values(city_sequence.nextval, 3, 10, '沈阳', '中国优秀旅游城市');<br /> insert into city values(city_sequence.nextval, 3, 11, '大连', '中国第一海军广场');<br /> insert into city values(city_sequence.nextval, 3, 12, '铁岭', '中国小品王的家乡');<br /> --添加三级菜单<br /> --这里只提供了黑龙江省的三级联动数据，关于其它省份的数据，请自行添加<br /> insert into city values(city_sequence.nextval, 4, 13, '巴彦县', '我的家乡');<br /> insert into city values(city_sequence.nextval, 4, 14, '延寿县', '延寿山庄');<br /> insert into city values(city_sequence.nextval, 4, 15, '木兰县', '慈航古寺');<br /> insert into city values(city_sequence.nextval, 5, 16, '抚远县', '白四爷庙');<br /> insert into city values(city_sequence.nextval, 5, 17, '汤原县', '西郎君城');<br /> insert into city values(city_sequence.nextval, 5, 18, '桦川县', '鱼米之乡');<br /> insert into city values(city_sequence.nextval, 6, 19, '集贤县', '大菩提寺');<br /> insert into city values(city_sequence.nextval, 6, 20, '宝清县', '雁窝之岛');<br /> insert into city values(city_sequence.nextval, 6, 21, '友谊县', '中苏友谊');