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>

 

你可能感兴趣的:(Ajax)