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>