ajax实现动态加载组合框

来源：互联网发布：笔记本风扇调节软件编辑：程序博客网时间：2024/06/06 02:12

一 province.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <html>   <head>     <script type="text/javascript" language="javaScript">       var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象       function createXMLHttpRequest() {         if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法           try {            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");          } catch(e) {            try {              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");              //旧版本的Internet Explorer，创建XMLHttpRequest对象            } catch(e) {              window.alert("创建XMLHttpRequest对象错误"+e);            }           }        } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法           xmlHttp = new XMLHttpRequest();         }         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象            window.alert("创建XMLHttpRequest对象异常！");        }         }       //下拉列表项改变时的操作      function proChange(objVal) {         createXMLHttpRequest(); //创建XMLHttpRequest对象         document.getElementById("city").length = 1;     //根据ID获取指定元素，并赋值         xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数         var url="CityByXMLServlet?province="+objVal; //请求的URL地址         xmlHttp.open("POST",url,true);         xmlHttp.send(null);       }              function cityList() { //onreadystatechange的处理函数        if(xmlHttp.readyState==4) {           if(xmlHttp.status==200) {             parseXML(xmlHttp.responseXML);     //解析服务器返回的XML数据          }         }      }       //解析xml信息，以添加地市       function parseXML(xmlDoc) {       var len = xmlDoc.getElementsByTagName("city");       //获取XML数据中所有的“city”元素对象集合         var _citySel = document.getElementById("city");     //根据ID获取页面中的select元素         for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项          var opt = document.createElement("OPTION");     //创建option对象          opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;          //指定新创建元素的text属性值          opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;        //指定新创建元素的value属性值          _citySel.add(opt); //为select元素添加option        }       }     </script>     <title>动态加载组合框</title>   </head>   <body>     <table align="center" border=1 width="320">       <tr>         <td>省份：</td>        <td>          <select id="province" onChange="proChange(this.value);" style="width:85">            <option value="gd">广东</option>             <option value="gx">广西</option>             <option value="hn">湖南</option>            <option value="hb">湖北</option>            <option value="ah">安徽</option>          </select>        </td>       </tr>     <tr>        <td>城市：</td>        <td>          <select id="city" style="width:85">             <option value="">--请选择--</option>          </select>        </td>       </tr>     </table> </body>  </html>

二、CityByXMLServlet.java

package servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.*;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class CityByXMLServlet */@WebServlet("/CityByXMLServlet")public class CityByXMLServlet extends HttpServlet {private static final long serialVersionUID = 1L;   private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";      /**     * @see HttpServlet#HttpServlet()     */    public CityByXMLServlet() {        super();        // TODO Auto-generated constructor stub    }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */    public void doGet(HttpServletRequest request, HttpServletResponse response)                 throws ServletException, IOException {            response.setContentType(CONTENT_TYPE); //设置服务器响应类型             String province =request.getParameter("province");             StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象                        if("gx".equals(province)){            List list=cityInit(); //获取城市列表                for(int i=0;i<list.size();i++){                     city.append("<city>"+list.get(i)+"</city>");                }                          }else if("hn".equals(province)){             List list = cityInit1(); //获取城市列表             for(int j=0;j<list.size();j++){                     city.append("<city>"+list.get(j)+"</city>");             }               }else if("hb".equals(province)){               List list = cityInit2(); //获取城市列表               for(int j=0;j<list.size();j++){                     city.append("<city>"+list.get(j)+"</city>");               }               }            city.append("</citys>");            PrintWriter out = response.getWriter();            out.println(city.toString());            out.flush(); //输出流刷新            out.close(); //关闭输出流         }              /*          * 初始化城市          */    public List<String> cityInit2() {        List<String> cityList = new ArrayList<String>();     //添加城市列表        cityList.add("武汉");        cityList.add("襄阳");        cityList.add("黄冈");        cityList.add("荆门");        cityList.add("十堰");        cityList.add("黄石");       return cityList;   }         public List<String> cityInit(){             List<String> cityList = new ArrayList<String>();          //添加城市列表             cityList.add("南宁");             cityList.add("桂林");             cityList.add("北海");             cityList.add("河池");             cityList.add("梧州");             cityList.add("玉林");        return cityList;     }       public List<String> cityInit1() {        List<String> cityList = new ArrayList<String>();     //添加城市列表        cityList.add("长沙");        cityList.add("湘潭");        cityList.add("岳阳");        cityList.add("常德");        cityList.add("衡阳");        cityList.add("邵阳");       return cityList;   }        /**          *当前Servelt的初始化方法. <br>          *          * @throws ServletException发生ServletExceptio时抛出          */        public void init() throws ServletException {        }protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

三 web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4"><servlet>    <servlet-name>CityByXMLServlet</servlet-name>    <servlet-class>servlet.CityByXMLServlet</servlet-class><!--类的位置  --></servlet><servlet-mapping>    <servlet-name>CityByXMLServlet</servlet-name><!--你创建的类名  -->    <url-pattern>/CityByXMLServlet</url-pattern></servlet-mapping>

阅读全文

0 0