ajax的列表联动示例

ajax的列表联动示例

1、  输入域：

请选择省：

    <select id="sel1" onchange="return choose(this);">

        <option value="">--请选择--</option>

        <option value="1">湖南省</option>

        <option value="2">湖北省</option>

    </select>

    &nbsp;&nbsp;

    请选择市：

    <select id="sel2">

        <option value="">--请选择--</option>

    </select>

 

2、  JavaScript脚本：

    var xmlHttp;

    //创建XMLHttpRequest对象

    function createXMLHttpRequest() {

       if(window.ActiveXObject) {

           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

       } else if (window.XMLHttpRequest) {

           xmlHttp = new XMLHttpReuqest();

       }

    }

    //选择下列列表中的值

    function choose(obj) {

       var province = obj.value;

       createXMLHttpRequest();

       xmlHttp.onreadystatechange = process;

       xmlHttp.open("GET", "SelProvince?province=" + province);

       xmlHttp.send(null);

    }

   

    //用来处理状态改变的函数

    function process() {

       //定义一个变量用于存放从服务器返回的响应结果

       var result;

       if(xmlHttp.readyState == 4) { //如果响应完成

           if(xmlHttp.status == 200) { //如果返回成功

              //取出服务器返回的XML中city标签的子结点

              result = xmlHttp.responseXML.getElementsByTagName("city");

              //先清除地市列表的现有内容

              while(document.all.sel2.options.length > 0) {

                     document.all.sel2.removeChild(document.all.sel2.childNodes[0]);

              }

              //解析xml文件的数据，并更新到本地列表

              for(var i=0; i<result.length; i++) {

                  var option = document.createElement("OPTION");

                  option.text = result[i].childNodes[0].childNodes[0].nodeValue;

                  option.value = result[i].childNodes[1].childNodes[0].nodeValue;

                  document.all.sel2.options.add(option);

              }                

           }

       }

    }

 

3、  Servlet文件：（SelProvince.java文件中的doGet方法）

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

       String province = request.getParameter("province"); 

       response.setContentType("text/xml");

       response.setCharacterEncoding("UTF-8");

       PrintWriter out = response.getWriter();

       out.println("<response>"); 

       if("1".equals(province)) {//如果选择的是“湖南省”

           out.println("<city>");

           out.println("<cityname>长沙</cityname>");

           out.println("<cityvalue>1</cityvalue>");

           out.println("</city>");

           out.println("<city>");

           out.println("<cityname>常德</cityname>");

           out.println("<cityvalue>2</cityvalue>");

           out.println("</city>");

       } else {

           out.println("<city>");

           out.println("<cityname>武汉</cityname>");

           out.println("<cityvalue>1</cityvalue>");

           out.println("</city>");

           out.println("<city>");

           out.println("<cityname>仙桃</cityname>");

           out.println("<cityvalue>2</cityvalue>");

           out.println("</city>");

       }

       out.println("</response>");

       out.flush();

       out.close();

    }

 

4、  web.xml文件配置：

  <servlet>

    <servlet-name>SelProvince</servlet-name>

    <servlet-class>com.solid.util.SelProvince</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>SelProvince</servlet-name>

    <url-pattern>/SelProvince</url-pattern>

  </servlet-mapping>