Ajax制作二级联动下拉列表框
浏览数：28 /
时间：2015年06月09日
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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
