完整版见https://jadyer.github.io/
这是一个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.18702 function 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" οnchange="getCitys(this.value)"> <%--这里onchange事件也可以写作οnchange="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>>(); @Override public 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得到其城市的List StringBuffer 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(); } }
