JavaWeb小练习：jQuery、Ajax + Servlet + CityMap 实现省市联动

在这个小案例中，我们将省份、城市信息存入Map集合中，通过JQuery+Ajax向后台请求数据，同时在UserServlet中编写getProvince方法，在该方法中，从保存省份新的Map集合中获取全部的省份、城市信息。
现在我们一起实现吧！

（一）将省份、城市信息存入Map集合

import java.util.LinkedHashMap;
import java.util.Map;

public class CityMap {
	   /**
     *  全国（省，直辖市，自治区，特别行政区）映射集合
     */
    public static Map<String,String[]> model=new LinkedHashMap();
    static{
        model.put("北京", new String[]{"北京"});
        model.put("上海", new String[]{"上海"});
        model.put("天津", new String[]{"天津"});
        model.put("重庆", new String[]{"重庆"});
        model.put("黑龙江", new String[]{"哈尔滨","齐齐哈尔","牡丹江","大庆","伊春","双鸭山","鹤岗","鸡西","佳木斯","七台河","黑河","绥化","大兴安岭"});
        model.put("吉林", new String[]{"长春","延边","吉林","白山","白城","四平","松原","辽源","大安","通化"});
        model.put("辽宁", new String[]{"沈阳","大连","葫芦岛","旅顺","本溪","抚顺","铁岭","辽阳","营口","阜新","朝阳","锦州","丹东","鞍山"});
        model.put("内蒙古", new String[]{"呼和浩特","呼伦贝尔","锡林浩特","包头","赤峰","海拉尔","乌海","鄂尔多斯","通辽"});
        model.put("河北", new String[]{"石家庄","唐山","张家口","廊坊","邢台","邯郸","沧州","衡水","承德","保定","秦皇岛"});
        model.put("河南", new String[]{"郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店"});
        model.put("山东", new String[]{"济南","青岛","淄博","威海","曲阜","临沂","烟台","枣庄","聊城","济宁","菏泽","泰安","日照","东营","德州","滨州","莱芜","潍坊"});
        model.put("山西", new String[]{"太原","阳泉","晋城","晋中","临汾","运城","长治","朔州","忻州","大同","吕梁"});
        model.put("江苏", new String[]{"南京","苏州","昆山","南通","太仓","吴县","徐州","宜兴","镇江","淮安","常熟","盐城","泰州","无锡","连云港","扬州","常州","宿迁"});
        model.put("安徽", new String[]{"合肥","巢湖","蚌埠","安庆","六安","滁州","马鞍山","阜阳","宣城","铜陵","淮北","芜湖","毫州","宿州","淮南","池州"});
        model.put("陕西", new String[]{"西安","韩城","安康","汉中","宝鸡","咸阳","榆林","渭南","商洛","铜川","延安"});
        model.put("宁夏", new String[]{"银川","固原","中卫","石嘴山","吴忠"});
        model.put("甘肃", new String[]{"兰州","白银","庆阳","酒泉","天水","武威","张掖","甘南","临夏","平凉","定西","金昌"});
        model.put("青海", new String[]{"西宁","海北","海西","黄南","果洛","玉树","海东","海南"});
        model.put("湖北", new String[]{"武汉","宜昌","黄冈","恩施","荆州","神农架","十堰","咸宁","襄樊","孝感","随州","黄石","荆门","鄂州"});
        model.put("湖南", new String[]{"长沙","邵阳","常德","郴州","吉首","株洲","娄底","湘潭","益阳","永州","岳阳","衡阳","怀化","韶山","张家界"});
        model.put("浙江", new String[]{"杭州","湖州","金华","宁波","丽水","绍兴","雁荡山","衢州","嘉兴","台州","舟山","温州"});
        model.put("江西", new String[]{"南昌","萍乡","九江","上饶","抚州","吉安","鹰潭","宜春","新余","景德镇","赣州"});
        model.put("福建", new String[]{"福州","厦门","龙岩","南平","宁德","莆田","泉州","三明","漳州"});
        model.put("贵州", new String[]{"贵阳","安顺","赤水","遵义","铜仁","六盘水","毕节","凯里","都匀"});
        model.put("四川", new String[]{"成都","泸州","内江","凉山","阿坝","巴中","广元","乐山","绵阳","德阳","攀枝花","雅安","宜宾","自贡","甘孜州","达州","资阳","广安","遂宁","眉山","南充"});
        model.put("广东", new String[]{"广州","深圳","潮州","韶关","湛江","惠州","清远","东莞","江门","茂名","肇庆","汕尾","河源","揭阳","梅州","中山","德庆","阳江","云浮","珠海","汕头","佛山"});
        model.put("广西", new String[]{"南宁","桂林","阳朔","柳州","梧州","玉林","桂平","贺州","钦州","贵港","防城港","百色","北海","河池","来宾","崇左"});
        model.put("云南", new String[]{"昆明","保山","楚雄","德宏","红河","临沧","怒江","曲靖","思茅","文山","玉溪","昭通","丽江","大理"});
        model.put("海南", new String[]{"海口","三亚","儋州","琼山","通什","文昌"});
        model.put("新疆", new String[]{"乌鲁木齐","阿勒泰","阿克苏","昌吉","哈密","和田","喀什","克拉玛依","石河子","塔城","库尔勒","吐鲁番","伊宁"});
    }
}

（二）编写HTML页面

在页面中添加设置省份的下拉列表（名称为province）和设置市县的下拉列表（名称为city），并在省份下拉列表的onchange事件中，调用getCity()方法获取省份对应的市县。具体代码如下：

<select name="province" id="province" onChange="getCity(this.value)"></select>
-
<select name="city" id="city"></select>

（三）向后台发送获取数据的请求并对请求到的数据进行处理

//向后台发请求，获取省份信息
    function getProvince(){
      $.ajax({
        type : "Get",
        url : "UserServlet?method=getProvince",
        success : function(result){
        	alert(result);
        	provinceArr = result.split(",");                           //将获取的省份名称字符串分隔为数组
        	for(i = 0; i < provinceArr.length; i++){                   //通过循环将数组中的省份名称添加到下拉列表中
        		document.getElementById("province").options[i] = new Option(provinceArr[i],provinceArr[i]);
        	}
        	if(provinceArr[0] != ""){
        		getCity(provinceArr[0]);                              //获取市县
        	}
        }
      });
    }

//向后台发请求，获取城市信息
    function getCity(selProvince){
    	$.ajax({
    		type : "Get",
    		url : "UserServlet?method=getCity&parProvince="+encodeURI(encodeURI(selProvince)),
    		success : function(result){
    			cityArr = result.split(",");                            //将获取的市县名称字符串分隔为数组
    			document.getElementById("city").length = 0;             //清空下拉列表
    			for(i = 0; i < cityArr.length; i++){                    //通过循环将数组中的市县名称添加到下拉列表中
            		document.getElementById("city").options[i] = new Option(cityArr[i],cityArr[i]);
            	}
    		}
    	});
  
    }

（四）在UserServlet中编写getProvince()方法

在该方法中，从保存省份信息的Map集合中获取全部的省份信息，并将获取的省份信息连接为一个以逗号分隔的字符串，输出到页面上。getProvince()方法的具体代码如下：

public String getProvince(HttpServletRequest request, HttpServletResponse response) throws Exception {
	String result = "";
	CityMap cityMap = new CityMap();     //实例化保存省份信息的CityMap类
	Map<String,String[]> map = cityMap.model;    //获取省份信息，保存到Map中
	Set<String> set = map.keySet();              //获取Map集合中的键，并以Set集合返回
	Iterator it = set.iterator();
	while(it.hasNext()) {
		result = result+it.next()+",";        //将获取的省份连接为一个以逗号分隔的字符串
	}
	result = result.substring(0,result.length()-1);       //去除最后一个逗号
	response.setContentType("text/html,charset=UTF-8");
	response.setCharacterEncoding("UTF-8");
	PrintWriter out = response.getWriter();              
	out.print(result);                                   //输出获取的省份字符串
	out.flush();
	out.close();                                         //关闭输出流对象
	return null;
}

（五）在UserServlet中编写getCity()方法

在该方法中，从保存省份信息的Map集合中获取指定省份对应的市县信息，并将获取的市县信息连接为一个以逗号分隔的字符串输出到页面上。getCity()方法的具体代码如下：

	public String getCity(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String result = "";
		String selProvince = request.getParameter("parProvince"); // 获取选择的省份
		selProvince=java.net.URLDecoder.decode(selProvince,"UTF-8");//字符串解码
		
		CityMap cityMap = new CityMap();     //实例化保存省份信息的CityMap类
		Map<String,String[]> map = cityMap.model;    //获取省份信息，保存到Map中
		String[] arrCity = map.get(selProvince);     //获取指定键的值
		for(int i = 0; i < arrCity.length; i++) {
			result = result+arrCity[i]+",";        //将获取的市县连接为一个以逗号分隔的字符串
		}
		result = result.substring(0,result.length()-1);       //去除最后一个逗号
		response.setContentType("text/html,charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();              
		out.print(result);                                   //输出获取的市县字符串
		out.flush();
		out.close();                                         //关闭输出流对象
		return null;
	}

这样子，省市联动已经实现！-_-