Ajax制作二级联动下拉列表框
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元素添加option56 }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>