Ajax制作二级联动下拉列表框

88264154

2013-07-12

Ajax制作二级联动下拉列表框

1.index.jsp

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <html>
 3   <head>
 4     <script type="text/javascript" language="javaScript">
 5       var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
 6       function createXMLHttpRequest() {
 7         if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法
 8           try {
 9             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10           } catch(e) {
11             try {
12               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13                //旧版本的Internet Explorer，创建XMLHttpRequest对象
14             } catch(e) {
15               window.alert("创建XMLHttpRequest对象错误"+e);
16             } 
17           }
18         } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
19           xmlHttp = new XMLHttpRequest();
20         } 
21         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
22             window.alert("创建XMLHttpRequest对象异常！");
23         }  
24       }
25 
26       //下拉列表项改变时的操作
27       function proChange(objVal) {
28         createXMLHttpRequest(); //创建XMLHttpRequest对象
29         document.getElementById("city").length = 1;     //根据ID获取指定元素，并赋值
30         xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数
31         var url = "/ComboTest/servlet/CityServlet?province=" + objVal; //请求的URL地址
32         xmlHttp.open("GET",url,true);
33         xmlHttp.send(null);
34       }
35       
36       function cityList() { //onreadystatechange的处理函数
37         if(xmlHttp.readyState==4) {
38           if(xmlHttp.status==200) {
39             parseXML(xmlHttp.responseXML);     //解析服务器返回的XML数据
40           }
41         }
42       }
43 
44       //解析xml信息，以添加地市
45       function parseXML(xmlDoc) {
46         var len = xmlDoc.getElementsByTagName("city");
47         //获取XML数据中所有的“city”元素对象集合
48         var _citySel = document.getElementById("city");     //根据ID获取页面中的select元素
49         for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项
50           var opt = document.createElement("OPTION");     //创建option对象
51           opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
52           //指定新创建元素的text属性值
53           opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
54           //指定新创建元素的value属性值
55           _citySel.add(opt); //为select元素添加option
56         }
57       }
58     </script>
59     <title>动态加载组合框</title>
60   </head>
61   <body>
62     <table align="center" border=1 width="320">
63       <tr>
64         <td>省份：</td>
65         <td>
66           <select id="province" onchange="proChange(this.value);" style="width:85">
67             <option value="gd">广东</option>
68             <option value="gx">广西</option>
69             <option value="hn">湖南</option>
70             <option value="hb">湖北</option>
71             <option value="ah">安徽</option>
72           </select>
73         </td>
74       </tr>
75       <tr>
76         <td>地市：</td>
77         <td>
78           <select id="city" style="width:85">
79             <option value="">--请选择--</option>
80           </select>
81         </td>
82       </tr>
83     </table>
84   </body>
85 </html>

2.CityServlet.java

1 public class CityServlet extends HttpServlet {
 2     private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
 3 //设置返回响应的ContentType
 4     /**
 5      *当前Servlet对象构造方法
 6      */
 7     public CityServlet() {
 8         super();
 9     }
10     /**
11      * 当前Servlet销毁时的操作。<br>
12      */
13     public void destroy() {
14         super.destroy();
15     }
16     /**
17      * 当前Servlet的doGet方法。<br>
18      *
19      * 当客户端表单的“method”类型为“get”时，调用此方法
20      * 
21      * @param request客户端请求对象
22      * @param response 服务器响应对象
23      * @throws ServletException 发生ServeltException时抛出
24      * @throws IOException 发生IOException时抛出
25      */
26     public void doGet(HttpServletRequest request, HttpServletResponse response)
27             throws ServletException, IOException {
28         response.setContentType(CONTENT_TYPE); //设置服务器响应类型
29         String province =request.getParameter("province");
30         StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象
31         List list = cityInit(); //获取城市列表
32         if("gx".equals(province)) {
33             for(int i=0;i<list.size();i++) {
34                 city.append("<city>"+list.get(i)+"</city>");
35             }            
36         }
37         city.append("</citys>");
38         PrintWriter out = response.getWriter();
39         out.print(city.toString());
40         out.flush(); //输出流刷新
41         out.close(); //关闭输出流
42     }
43 
44     /*
45      * 初始化城市
46      */
47     public List<String> cityInit() {
48         List<String> cityList = new ArrayList<String>();
49      //添加城市列表
50         cityList.add("南宁");
51         cityList.add("桂林");
52         cityList.add("北海");
53         cityList.add("河池");
54         cityList.add("梧州");
55         cityList.add("玉林");
56     return cityList;
57 }
58 
59     /**
60      *当前Servelt的初始化方法. <br>
61      *
62      * @throws ServletException发生ServletExceptio时抛出
63      */
64     public void init() throws ServletException {
65     }
66 }

3.web.xml

1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7 <servlet>
 8     <description>This is the description of my J2EE component</description>
 9     <display-name>This is the display name of my J2EE component</display-name>
10     <servlet-name>CityServlet</servlet-name>
11     <servlet-class>wen.CityServlet</servlet-class>
12   </servlet>
13   <servlet-mapping>
14     <servlet-name>CityServlet</servlet-name>
15     <url-pattern>/servlet/CityServlet</url-pattern>
16   </servlet-mapping>
17   <welcome-file-list>
18     <welcome-file>index.jsp</welcome-file>
19   </welcome-file-list>
20 </web-app>

xmlhttprequest ajax