Ajax实现省市二级联动

这是一个Servlet应用。。

首先是web.xml文件

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><servlet-name>ProvinceCityServlet</servlet-name><servlet-class>com.jadyer.ajax.ProvinceCityServlet</servlet-class></servlet><servlet-mapping><servlet-name>ProvinceCityServlet</servlet-name><url-pattern>/servlet/ProvinceCityServlet</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>

然后是显示二级联动效果的index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%><script type="text/javascript">var xmlHTTP = new XMLHttpRequest(); //支持Internet Explorer-8.0.6001.18702function getCitys(provinceID){//若省份项选中了【==请选择省份==】则清空城市列表数据，并显示【==请选择城市==】if('0' == provinceID){clearCitys();return;}xmlHTTP.open('GET', '${pageContext.request.contextPath}/servlet/ProvinceCityServlet?provinceID='+provinceID, true);xmlHTTP.onreadystatechange = callback; //设置回调函数xmlHTTP.setRequestHeader("if-Modified-Since", "0"); //设置不使用浏览器缓存xmlHTTP.send(null); //发送请求}function callback(){if(4==xmlHTTP.readyState && 200==xmlHTTP.status){var cityStrings = xmlHTTP.responseText; //得到返回的【绥化,鸡西,哈尔滨,佳木斯】var citys = cityStrings.split(","); //拆分得到的城市字符串数组clearCitys();var city = document.getElementById("city");for(var i=0; i<citys.length; i++){var option = document.createElement("option");option.text = citys[i];option.value = i;//使用city.appendChild(option);时，在Firefox3.6.13中有效，而IE8.0.6001.18702中则显示空白city.options[i+1] = option; //所以就暂时不使用DOM方式，这种同时支持Firefox和IE}}}//清空城市列表数据function clearCitys(){var city = document.getElementById('city');city.options.length = 0;city.options[0] = new Option('==请选择城市==', '0');}</script>省份：<select id="province" onchange="getCitys(this.value)"><%--这里onchange事件也可以写作onchange="getCitys(this.options[this.selectedIndex].value)"--%><option value="0">==请选择省份==</option><option value="1">黑龙江</option><option value="2">吉林省</option><option value="3">辽宁省</option></select>    城市：<select id="city"><option>==请选择城市==</option></select>

最后是用来处理Ajax请求操作的ProvinceCityServlet.java

package com.jadyer.ajax;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 这里并没有连接数据库，一切数据均由自己构造 * @see 实际应用中，应从数据库中获取动态数据 */@SuppressWarnings("serial")public class ProvinceCityServlet extends HttpServlet {public static Map<String, List<String>> map = new HashMap<String, List<String>>();@Overridepublic void init() throws ServletException {List<String> list = new ArrayList<String>();list.add("绥化");list.add("鸡西");list.add("哈尔滨");list.add("佳木斯");map.put("1", list); //黑龙江list = new ArrayList<String>();list.add("长春");list.add("图门");list.add("延吉");list.add("四平");map.put("2", list); //吉林省list = new ArrayList<String>();list.add("大连");list.add("沈阳");list.add("铁岭");list.add("本溪");map.put("3", list); //辽宁省}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String provinceID = request.getParameter("provinceID");List<String> list = map.get(provinceID); //根据省份ID得到其城市的ListStringBuffer sb = new StringBuffer();if(null != list){for(String s : list){sb.append(s).append(",");}//这里构造的该省份下的城市，所组成的字符串，即类似于【绥化,鸡西,哈尔滨,佳木斯,】//注意这里最后会追加一个逗号，所以我们要删除掉最后一个逗号if(!list.isEmpty()){sb.deleteCharAt(sb.length() - 1);}}response.setContentType("text/html; charset=UTF-8"); //设置应答类别PrintWriter out = response.getWriter();out.print(sb.toString());out.close();}}