Ajax實現省市二級聯動

這是一個Servlet應用。。

首先是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>ProvinceCityServlet</servlet-name><br /><servlet-class>com.jadyer.ajax.ProvinceCityServlet</servlet-class><br /></servlet><br /><servlet-mapping><br /><servlet-name>ProvinceCityServlet</servlet-name><br /><url-pattern>/servlet/ProvinceCityServlet</url-pattern><br /></servlet-mapping><br /><welcome-file-list><br /><welcome-file>index.jsp</welcome-file><br /></welcome-file-list><br /></web-app>

然後是顯示二級聯動效果的index.jsp頁面

<%@ page language="java" pageEncoding="UTF-8"%></p><p><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/ProvinceCityServlet?provinceID='+provinceID, true);<br />xmlHTTP.onreadystatechange = callback; //設定回呼函數<br />xmlHTTP.setRequestHeader("if-Modified-Since", "0"); //設定不使用瀏覽器緩衝<br />xmlHTTP.send(null); //發送請求<br />}</p><p>function callback(){<br />if(4==xmlHTTP.readyState && 200==xmlHTTP.status){<br />var cityStrings = xmlHTTP.responseText; //得到返回的【綏化,雞西,哈爾濱,佳木斯】<br />var citys = cityStrings.split(","); //拆分得到的城市字串數組</p><p>clearCitys();<br />var city = document.getElementById("city");</p><p>for(var i=0; i<citys.length; i++){<br />var option = document.createElement("option");<br />option.text = citys[i];<br />option.value = i;</p><p>//使用city.appendChild(option);時，在Firefox3.6.13中有效，而IE8.0.6001.18702中則顯示空白<br />city.options[i+1] = option; //所以就暫時不使用DOM方式，這種同時支援Firefox和IE<br />}<br />}<br />}</p><p>//清空城市列表資料<br />function clearCitys(){<br />var city = document.getElementById('city');<br />city.options.length = 0;<br />city.options[0] = new Option('==請選擇城市==', '0');<br />}<br /></script></p><p>省份：<br /><select id="province" onchange="getCitys(this.value)"><br /><%--這裡onchange事件也可以寫作onchange="getCitys(this.options[this.selectedIndex].value)"--%><br /><option value="0">==請選擇省份==</option><br /><option value="1">黑龍江</option><br /><option value="2">吉林省</option><br /><option value="3">遼寧省</option><br /></select><br />    <br />城市：<br /><select id="city"><br /><option>==請選擇城市==</option><br /></select>

最後是用來處理Ajax請求操作的ProvinceCityServlet.java

package com.jadyer.ajax;</p><p>import java.io.IOException;<br />import java.io.PrintWriter;<br />import java.util.ArrayList;<br />import java.util.HashMap;<br />import java.util.List;<br />import java.util.Map;</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>/**<br /> * 這裡並沒有串連資料庫，一切資料均由自己構造<br /> * @see 實際應用中，應從資料庫中擷取動態資料<br /> */<br />@SuppressWarnings("serial")<br />public class ProvinceCityServlet extends HttpServlet {<br />public static Map<String, List<String>> map = new HashMap<String, List<String>>();</p><p>@Override<br />public void init() throws ServletException {<br />List<String> list = new ArrayList<String>();<br />list.add("綏化");<br />list.add("雞西");<br />list.add("哈爾濱");<br />list.add("佳木斯");<br />map.put("1", list); //黑龍江<br />list = new ArrayList<String>();<br />list.add("長春");<br />list.add("圖門");<br />list.add("延吉");<br />list.add("四平");<br />map.put("2", list); //吉林省<br />list = new ArrayList<String>();<br />list.add("大連");<br />list.add("瀋陽");<br />list.add("鐵嶺");<br />list.add("本溪");<br />map.put("3", list); //遼寧省<br />}</p><p>protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {<br />String provinceID = request.getParameter("provinceID");<br />List<String> list = map.get(provinceID); //根據省份ID得到其城市的List</p><p>StringBuffer sb = new StringBuffer();<br />if(null != list){<br />for(String s : list){<br />sb.append(s).append(",");<br />}<br />//這裡構造的該省份下的城市，所組成的字串，即類似於【綏化,雞西,哈爾濱,佳木斯,】<br />//注意這裡最後會追加一個逗號，所以我們要刪除掉最後一個逗號<br />if(!list.isEmpty()){<br />sb.deleteCharAt(sb.length() - 1);<br />}<br />}</p><p>response.setContentType("text/html; charset=UTF-8"); //設定應答類別<br />PrintWriter out = response.getWriter();<br />out.print(sb.toString());<br />out.close();<br />}<br />}