Ajax案例5-->省市联动

jsp页面--fifthajax.jsp

 

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5 <html>
  6 <head>
  7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8 <title>Insert title here</title>
  9 </head>
 10 <script type="text/javascript">
 11 
 12 //获得XMLHttprequest对象
 13     function createXMLHttpRequest(){
 14         try{
 15             return new XMLHttpRequest();
 16         }catch(e){
 17             try{
 18                 return new ActiveXObject("Msxml2.XMLHTTP");
 19             }catch(e){
 20                 try{
 21                     return new ActiveXObject("Microsoft.XMLHTTP");
 22                 }catch(e){
 23                     alert("请更换浏览器");
 24                 }
 25             }
 26         }
 27     }
 28     
 29 ////////////////////////////////////////////////加载省级联动
 30     window.onload = function(){
 31     
 32         var provinceEle = document.getElementById("province");
 33         
 34         var xmlHttp = createXMLHttpRequest();
 35         xmlHttp.open("GET","<c:url value ='/ProvinceServlet'/>",true);
 36         xmlHttp.send(null);
 37         xmlHttp.onreadystatechange = function(){
 38             if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
 39                 
 40                 var text = xmlHttp.responseText;
 41                 
 42                 var provinceArr = text.split(",");        
 43                 for(var i = 0;i<provinceArr.length;i++){
 44                     
 45                     var provinceName = provinceArr[i];//得到每个省份的名称
 46                     
 47                     //<option></option>
 48                     var optionEle = document.createElement("option");
 49                     
 50                     //optionEle.value= provinceName;//不是必须
 51                     
 52                     //provinceName--把省名称创建为文本结点
 53                     var optionTextNode = document.createTextNode(provinceName);
 54                     
 55                     //<option>provinceName</option>
 56                     optionEle.appendChild(optionTextNode);
 57                     
 58                     //<select><option>provinceName</option></select>
 59                     provinceEle.appendChild(optionEle);
 60                 }
 61             }
 62         };
 63 //////////////////////////////////////////////////接收省名称,加载市级联动
 64         provinceEle.onchange = function(){
 65     
 66         var proName = province.value;
 67         
 68         var xmlHttp = createXMLHttpRequest();
 69         xmlHttp.open("POST","<c:url value='/CityServlet'/>",true);
 70         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 71         xmlHttp.send("provinceName="+proName);
 72         
 73         xmlHttp.onreadystatechange= function(){
 74             
 75             if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
 76                 
 77                 var XMLdoc = xmlHttp.responseXML;
 78                 
 79                 //------删除所有option元素,保留 "请选择"
 80                 var city = document.getElementById("city");                
 81                 var cityOptionList = city.getElementsByTagName("option");                
 82                 while(cityOptionList.length>1){
 83                     city.removeChild(cityOptionList[1]);
 84                 }
 85                 
 86                 //------
 87                 var cityEleList = XMLdoc.getElementsByTagName("city");
 88                 
 89                 for(var i =0;i < cityEleList.length; i++){
 90                     
 91                     var cityName = cityEleList[i].textContent;
 92                     
 93                     var optionEle = document.createElement("option");
 94                     
 95                     //option.value = cityName;//不是必须
 96                     
 97                     var textNode = document.createTextNode(cityName);
 98                     
 99                     optionEle.appendChild(textNode);
100                     
101                     city.appendChild(optionEle);
102                 }
103             }
104         };
105     };
106         
107 };
108 </script>
109 <body>
110 
111 <h1>省市联动</h1>
112 
113 <select name ="province" id= "province">
114     <option>===请选择===</option>
115 </select>
116 
117 <select name = "city" id= "city">
118     <option>===请选择===</option>
119 </select>
120 
121 </body>
122 </html>

 

Servlet-->ProvinceServlet.java

 1 package ajax;
 2 
 3 import java.io.IOException;
 4 import java.io.InputStream;
 5 import java.util.List;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import org.dom4j.Attribute;
13 import org.dom4j.Document;
14 import org.dom4j.DocumentException;
15 import org.dom4j.io.SAXReader;
16 /*
17  * 把所有省名称作为字符串用逗号隔开发送给客户端
18  */
19 @SuppressWarnings("all")
20 public class ProvinceServlet extends HttpServlet {
21 
22     public void doGet(HttpServletRequest request, HttpServletResponse response)
23             throws ServletException, IOException {
24         
25         response.setContentType("text/html;charset=utf-8");
26         
27         SAXReader reader = new SAXReader();
28         InputStream in = this.getClass().getResourceAsStream("/china.xml");
29         
30         try {
31             Document XMLdoc = reader.read(in);
32             
33             String xpath = "//province/@name";
34             //查询所有的子元素province,获取元素属性的name值
35             List<Attribute> attrList = (List<Attribute>)XMLdoc.selectNodes(xpath);
36             
37             StringBuilder builder = new StringBuilder();
38             
39             for (Attribute attr : attrList) {
40                 builder.append(attr.getValue()).append(",");
41             }
42         
43             builder.deleteCharAt(builder.length()-1);    //去掉最后一个逗号
44             
45             response.getWriter().print(builder);
46             
47         } catch (DocumentException e) {
48             e.printStackTrace();
49         }
50     }
51 }

 

Servlet-->CityServlet.java

 1 package ajax;
 2 
 3 import java.io.IOException;
 4 import java.io.InputStream;
 5 import java.io.PrintWriter;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import org.dom4j.Document;
13 import org.dom4j.DocumentException;
14 import org.dom4j.Element;
15 import org.dom4j.io.SAXReader;
16 
17 @SuppressWarnings("all")
18 public class CityServlet extends HttpServlet {
19 
20     public void doPost(HttpServletRequest request, HttpServletResponse response)
21             throws ServletException, IOException {
22         
23         request.setCharacterEncoding("utf-8");
24         response.setContentType("text/xml;charset=utf-8");
25         
26         SAXReader reader = new SAXReader();
27         InputStream in = this.getClass().getResourceAsStream("/china.xml");
28         
29         try {
30             Document doc = reader.read(in);
31             String provinceName = request.getParameter("provinceName");
32             
33             //获取province元素下面所有name=provinceName的子元素的值
34             String xpath = "//province[@name='"+provinceName+"']";
35             
36             Element province = (Element)doc.selectSingleNode(xpath);
37             
38             //System.out.println(province.asXML());
39             
40             response.getWriter().print(province.asXML());
41             
42         } catch (DocumentException e) {
43             e.printStackTrace();
44         }
45     }
46 }

 

图片展示:

 附件:china.xml

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <china>
  3     <province name="北京">
  4         <city>东城区</city>
  5         <city>西城区</city>
  6         <city>崇文区</city>
  7         <city>宣武区</city>
  8         <city>朝阳区</city>
  9         <city>丰台区</city>
 10         <city>石景山区</city>
 11         <city>海淀区</city>
 12         <city>门头沟区</city>
 13         <city>房山区</city>
 14         <city>通州区</city>
 15         <city>顺义区</city>
 16         <city>昌平区</city>
 17         <city>大兴区</city>
 18         <city>怀柔区</city>
 19         <city>平谷区</city>
 20         <city>密云县</city>
 21         <city>延庆县</city>
 22     </province>
 23     <province name="天津">
 24         <city>和平区</city>
 25         <city>河东区</city>
 26         <city>河西区</city>
 27         <city>南开区</city>
 28         <city>河北区</city>
 29         <city>红桥区</city>
 30         <city>塘沽区</city>
 31         <city>汉沽区</city>
 32         <city>大港区</city>
 33         <city>东丽区</city>
 34         <city>西青区</city>
 35         <city>津南区</city>
 36         <city>北辰区</city>
 37         <city>武清区</city>
 38         <city>宝坻区</city>
 39         <city>宁河县</city>
 40         <city>静海县</city>
 41         <city>蓟县</city>
 42     </province>
 43     <province name="河北">
 44         <city>石家庄</city>
 45         <city>唐山</city>
 46         <city>秦皇岛</city>
 47         <city>邯郸</city>
 48         <city>邢台</city>
 49         <city>保定</city>
 50         <city>张家口</city>
 51         <city>承德</city>
 52         <city>沧州</city>
 53         <city>廊坊</city>
 54         <city>衡水</city>
 55     </province>
 56     <province name="山西">
 57         <city>太原</city>
 58         <city>大同</city>
 59         <city>阳泉</city>
 60         <city>长治</city>
 61         <city>晋城</city>
 62         <city>朔州</city>
 63         <city>晋中</city>
 64         <city>运城</city>
 65         <city>忻州</city>
 66         <city>临汾</city>
 67         <city>吕梁</city>
 68     </province>
 69     <province name="内蒙古">
 70         <city>呼和浩特</city>
 71         <city>包头</city>
 72         <city>乌海</city>
 73         <city>赤峰</city>
 74         <city>通辽</city>
 75         <city>鄂尔多斯</city>
 76         <city>呼伦贝尔</city>
 77         <city>巴彦淖尔</city>
 78         <city>乌兰察布</city>
 79         <city>兴安盟</city>
 80         <city>锡林郭勒盟</city>
 81         <city>阿拉善盟</city>
 82     </province>
 83     <province name="辽宁">
 84         <city>沈阳</city>
 85         <city>大连</city>
 86         <city>鞍山</city>
 87         <city>抚顺</city>
 88         <city>本溪</city>
 89         <city>丹东</city>
 90         <city>锦州</city>
 91         <city>营口</city>
 92         <city>阜新</city>
 93         <city>辽阳</city>
 94         <city>盘锦</city>
 95         <city>铁岭</city>
 96         <city>朝阳</city>
 97         <city>葫芦岛</city>
 98     </province>
 99     <province name="吉林">
100         <city>长春</city>
101         <city>吉林</city>
102         <city>四平</city>
103         <city>辽源</city>
104         <city>通化</city>
105         <city>白山</city>
106         <city>松原</city>
107         <city>白城</city>
108         <city>延边</city>
109     </province>
110     <province name="黑龙江">
111         <city>哈尔滨</city>
112         <city>齐齐哈尔</city>
113         <city>鸡西</city>
114         <city>鹤岗</city>
115         <city>双鸭山</city>
116         <city>大庆</city>
117         <city>伊春</city>
118         <city>佳木斯</city>
119         <city>七台河</city>
120         <city>牡丹江</city>
121         <city>黑河</city>
122         <city>绥化</city>
123         <city>大兴安岭</city>
124     </province>
125     <province name="上海">
126         <city>黄浦区</city>
127         <city>卢湾区</city>
128         <city>徐汇区</city>
129         <city>长宁区</city>
130         <city>静安区</city>
131         <city>普陀区</city>
132         <city>闸北区</city>
133         <city>虹口区</city>
134         <city>杨浦区</city>
135         <city>闵行区</city>
136         <city>宝山区</city>
137         <city>嘉定区</city>
138         <city>浦东新区</city>
139         <city>金山区</city>
140         <city>松江区</city>
141         <city>青浦区</city>
142         <city>南汇区</city>
143         <city>奉贤区</city>
144         <city>崇明县</city>
145     </province>
146     <province name="江苏">
147         <city>南京</city>
148         <city>无锡</city>
149         <city>徐州</city>
150         <city>常州</city>
151         <city>苏州</city>
152         <city>南通</city>
153         <city>连云港</city>
154         <city>淮安</city>
155         <city>盐城</city>
156         <city>扬州</city>
157         <city>镇江</city>
158         <city>泰州</city>
159         <city>宿迁</city>
160     </province>
161     <province name="浙江">
162         <city>杭州</city>
163         <city>宁波</city>
164         <city>温州</city>
165         <city>嘉兴</city>
166         <city>湖州</city>
167         <city>绍兴</city>
168         <city>金华</city>
169         <city>衢州</city>
170         <city>舟山</city>
171         <city>台州</city>
172         <city>丽水</city>
173     </province>
174     <province name="安徽">
175         <city>合肥</city>
176         <city>芜湖</city>
177         <city>蚌埠</city>
178         <city>淮南</city>
179         <city>马鞍山</city>
180         <city>淮北</city>
181         <city>铜陵</city>
182         <city>安庆</city>
183         <city>黄山</city>
184         <city>滁州</city>
185         <city>阜阳</city>
186         <city>宿州</city>
187         <city>巢湖</city>
188         <city>六安</city>
189         <city>亳州</city>
190         <city>池州</city>
191         <city>宣城</city>
192     </province>
193     <province name="福建">
194         <city>福州</city>
195         <city>厦门</city>
196         <city>莆田</city>
197         <city>三明</city>
198         <city>泉州</city>
199         <city>漳州</city>
200         <city>南平</city>
201         <city>龙岩</city>
202         <city>宁德</city>
203     </province>
204     <province name="江西">
205         <city>南昌</city>
206         <city>景德镇</city>
207         <city>萍乡</city>
208         <city>九江</city>
209         <city>新余</city>
210         <city>鹰潭</city>
211         <city>赣州</city>
212         <city>吉安</city>
213         <city>宜春</city>
214         <city>抚州</city>
215         <city>上饶</city>
216     </province>
217     <province name="山东">
218         <city>济南</city>
219         <city>青岛</city>
220         <city>淄博</city>
221         <city>枣庄</city>
222         <city>东营</city>
223         <city>烟台</city>
224         <city>潍坊</city>
225         <city>济宁</city>
226         <city>泰安</city>
227         <city>威海</city>
228         <city>日照</city>
229         <city>莱芜</city>
230         <city>临沂</city>
231         <city>德州</city>
232         <city>聊城</city>
233         <city>滨州</city>
234         <city>荷泽</city>
235     </province>
236     <province name="河南">
237         <city>郑州</city>
238         <city>开封</city>
239         <city>洛阳</city>
240         <city>平顶山</city>
241         <city>安阳</city>
242         <city>鹤壁</city>
243         <city>新乡</city>
244         <city>焦作</city>
245         <city>濮阳</city>
246         <city>许昌</city>
247         <city>漯河</city>
248         <city>三门峡</city>
249         <city>南阳</city>
250         <city>商丘</city>
251         <city>信阳</city>
252         <city>周口</city>
253         <city>驻马店</city>
254     </province>
255     <province name="湖北">
256         <city>武汉</city>
257         <city>黄石</city>
258         <city>十堰</city>
259         <city>宜昌</city>
260         <city>襄樊</city>
261         <city>鄂州</city>
262         <city>荆门</city>
263         <city>孝感</city>
264         <city>荆州</city>
265         <city>黄冈</city>
266         <city>咸宁</city>
267         <city>随州</city>
268         <city>恩施</city>
269         <city>神农架</city>
270     </province>
271     <province name="湖南">
272         <city>长沙</city>
273         <city>株洲</city>
274         <city>湘潭</city>
275         <city>衡阳</city>
276         <city>邵阳</city>
277         <city>岳阳</city>
278         <city>常德</city>
279         <city>张家界</city>
280         <city>益阳</city>
281         <city>郴州</city>
282         <city>永州</city>
283         <city>怀化</city>
284         <city>娄底</city>
285         <city>湘西</city>
286     </province>
287     <province name="广东">
288         <city>广州</city>
289         <city>韶关</city>
290         <city>深圳</city>
291         <city>珠海</city>
292         <city>汕头</city>
293         <city>佛山</city>
294         <city>江门</city>
295         <city>湛江</city>
296         <city>茂名</city>
297         <city>肇庆</city>
298         <city>惠州</city>
299         <city>梅州</city>
300         <city>汕尾</city>
301         <city>河源</city>
302         <city>阳江</city>
303         <city>清远</city>
304         <city>东莞</city>
305         <city>中山</city>
306         <city>潮州</city>
307         <city>揭阳</city>
308         <city>云浮</city>
309     </province>
310     <province name="广西">
311         <city>南宁</city>
312         <city>柳州</city>
313         <city>桂林</city>
314         <city>梧州</city>
315         <city>北海</city>
316         <city>防城港</city>
317         <city>钦州</city>
318         <city>贵港</city>
319         <city>玉林</city>
320         <city>百色</city>
321         <city>贺州</city>
322         <city>河池</city>
323         <city>来宾</city>
324         <city>崇左</city>
325     </province>
326     <province name="海南">
327         <city>海口</city>
328         <city>三亚</city>
329     </province>
330     <province name="重庆">
331         <city>重庆</city>
332         <city>万州区</city>
333         <city>涪陵区</city>
334         <city>渝中区</city>
335         <city>大渡口区</city>
336         <city>江北区</city>
337         <city>沙坪坝区</city>
338         <city>九龙坡区</city>
339         <city>南岸区</city>
340         <city>北碚区</city>
341         <city>万盛区</city>
342         <city>双桥区</city>
343         <city>渝北区</city>
344         <city>巴南区</city>
345         <city>黔江区</city>
346         <city>长寿区</city>
347         <city>綦江县</city>
348         <city>潼南县</city>
349         <city>铜梁县</city>
350         <city>大足县</city>
351         <city>荣昌县</city>
352         <city>璧山县</city>
353         <city>梁平县</city>
354         <city>城口县</city>
355         <city>丰都县</city>
356         <city>垫江县</city>
357         <city>武隆县</city>
358         <city>忠县</city>
359         <city>开县</city>
360         <city>云阳县</city>
361         <city>奉节县</city>
362         <city>巫山县</city>
363         <city>巫溪县</city>
364         <city>石柱土家族自治县</city>
365         <city>秀山土家族苗族自治县</city>
366         <city>酉阳土家族苗族自治县</city>
367         <city>彭水苗族土家族自治县</city>
368         <city>江津</city>
369         <city>合川</city>
370         <city>永川</city>
371         <city>南川</city>
372     </province>
373     <province name="四川">
374         <city>成都</city>
375         <city>自贡</city>
376         <city>攀枝花</city>
377         <city>泸州</city>
378         <city>德阳</city>
379         <city>绵阳</city>
380         <city>广元</city>
381         <city>遂宁</city>
382         <city>内江</city>
383         <city>乐山</city>
384         <city>南充</city>
385         <city>眉山</city>
386         <city>宜宾</city>
387         <city>广安</city>
388         <city>达州</city>
389         <city>雅安</city>
390         <city>巴中</city>
391         <city>资阳</city>
392         <city>阿坝</city>
393         <city>甘孜</city>
394         <city>凉山</city>
395     </province>
396     <province name="贵州">
397         <city>贵阳</city>
398         <city>六盘水</city>
399         <city>遵义</city>
400         <city>安顺</city>
401         <city>铜仁</city>
402         <city>黔西南</city>
403         <city>毕节</city>
404         <city>黔东南</city>
405         <city>黔南</city>
406     </province>
407     <province name="云南">
408         <city>昆明</city>
409         <city>曲靖</city>
410         <city>玉溪</city>
411         <city>保山</city>
412         <city>昭通</city>
413         <city>丽江</city>
414         <city>思茅</city>
415         <city>临沧</city>
416         <city>楚雄</city>
417         <city>红河</city>
418         <city>文山</city>
419         <city>西双版纳</city>
420         <city>大理</city>
421         <city>德宏</city>
422         <city>怒江</city>
423         <city>迪庆</city>
424     </province>
425     <province name="西藏">
426         <city>拉萨</city>
427         <city>昌都</city>
428         <city>山南</city>
429         <city>日喀则</city>
430         <city>那曲</city>
431         <city>阿里</city>
432         <city>林芝</city>
433     </province>
434     <province name="陕西">
435         <city>西安</city>
436         <city>铜川</city>
437         <city>宝鸡</city>
438         <city>咸阳</city>
439         <city>渭南</city>
440         <city>延安</city>
441         <city>汉中</city>
442         <city>榆林</city>
443         <city>安康</city>
444         <city>商洛</city>
445     </province>
446     <province name="甘肃">
447         <city>兰州</city>
448         <city>嘉峪关</city>
449         <city>金昌</city>
450         <city>白银</city>
451         <city>天水</city>
452         <city>武威</city>
453         <city>张掖</city>
454         <city>平凉</city>
455         <city>酒泉</city>
456         <city>庆阳</city>
457         <city>定西</city>
458         <city>陇南</city>
459         <city>临夏</city>
460         <city>甘南</city>
461     </province>
462     <province name="青海">
463         <city>西宁</city>
464         <city>海东</city>
465         <city>海北</city>
466         <city>黄南</city>
467         <city>海南</city>
468         <city>果洛</city>
469         <city>玉树</city>
470         <city>海西</city>
471     </province>
472     <province name="宁夏">
473         <city>银川</city>
474         <city>石嘴山</city>
475         <city>吴忠</city>
476         <city>固原</city>
477         <city>中卫</city>
478     </province>
479     <province name="新疆">
480         <city>乌鲁木齐</city>
481         <city>克拉玛依</city>
482         <city>吐鲁番</city>
483         <city>哈密</city>
484         <city>昌吉</city>
485         <city>博尔塔拉</city>
486         <city>巴音郭楞</city>
487         <city>阿克苏</city>
488         <city>克孜勒苏</city>
489         <city>喀什</city>
490         <city>和田</city>
491         <city>伊犁</city>
492         <city>塔城</city>
493         <city>阿勒泰</city>
494         <city>石河子</city>
495         <city>阿拉尔</city>
496         <city>图木舒克</city>
497         <city>五家渠</city>
498     </province>
499     <province name="香港">
500         <city>香港</city>
501     </province>
502     <province name="澳门">
503         <city>澳门</city>
504     </province>
505     <province name="台湾">
506         <city>台湾</city>
507     </province>
508 </china>

 

posted on 2016-05-24 16:53  vmkash  阅读(490)  评论(0)  编辑  收藏  举报

导航