Ajax实现二级联动菜单

来源：互联网发布：jupyter notebook编程编辑：程序博客网时间：2024/05/02 07:57

index.jsp

<%@ page language="java" pageEncoding="UTF-8"%><html>    <head>        <title>二级菜单联动演示</title>        <script type="text/javascript">    var req;    window.onload=function()    {//页面加载时的函数    }        function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数      var province = document.getElementById('province').value;      var url = "select?id="+ escape(province);      if(window.XMLHttpRequest){        req = new XMLHttpRequest();      }else if(window.ActiveXObject){        req = new ActiveXObject("Microsoft.XMLHTTP");      }      if(req){        req.open("GET",url,true);         //指定回调函数为callback        req.onreadystatechange = callback;        req.send(null);      }    }    //回调函数    function callback(){      if(req.readyState ==4){        if(req.status ==200){          parseMessage();//解析XML文档        }else{          alert("不能得到描述信息:" + req.statusText);        }      }    }    //解析返回xml的方法    function parseMessage(){      var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档      var xSel = xmlDoc.getElementsByTagName('select');      //获得XML文档中的所有<select>标记      var select_root = document.getElementById('city');      //获得网页中的第二个下拉框      select_root.options.length=0;      //每次获得新的数据的时候先把每二个下拉框架的长度清0            for(var i=0;i<xSel.length;i++){        var xValue = xSel[i].childNodes[0].firstChild.nodeValue;        //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值        var xText = xSel[i].childNodes[1].firstChild.nodeValue;        //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值                var option = new Option(xText, xValue);        //根据每组value和text标记的值创建一个option对象                try{          select_root.add(option);//将option对象添加到第二个下拉框中        }catch(e){        }      }    }          </script>    </head>    <body>        <div align="center">            <form name="form1" method="post" action="">                <table width="70%" border="0" cellspacing="0" cellpadding="0">                    <tr>                        <td align="center">                            二级联动示例                        </td>                    </tr>                    <tr>                        <td>                            <select name="province" id="province" onChange="Change_Select()">                                <!--第一个下拉菜单-->                                <option value="0">                                    请选择                                </option>                                <option value="1">                                    北京                                </option>                                <option value="2">                                    天津                                </option>                                <option value="3">                                    山东                                </option>                            </select>                            <select name="city" id="city">                                <!--第二个下拉菜单-->                                <option value="0">                                    请选择                                </option>                            </select>                        </td>                    </tr>                    <tr>                        <td>                        </td>                    <tr>                </table>            </form>        </div>    </body></html>

SelectServlet.java

package com;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** *  * @author zdw * */public class SelectServlet extends HttpServlet{    private static final long serialVersionUID = 1L;    public SelectServlet()    {        super();    }    public void destroy()    {        super.destroy();    }    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException    {//        response.setCharacterEncoding("GBK");        response.setContentType("text/xml");        response.setHeader("Cache-Control", "no-cache");        request.setCharacterEncoding("GBK");        response.setCharacterEncoding("UTF-8");        String targetId = request.getParameter("id").toString();        System.out.println(targetId);        // 获得请求中参数为id的值        String xml_start = "<selects>";        String xml_end = "</selects>";        String xml = "";        if (targetId.equalsIgnoreCase("0"))        {            xml = "<select><value>0</value><text>请选择</text></select>";        } else if (targetId.equalsIgnoreCase("1"))        {            xml = "<select><value>1</value><text>昌平</text></select>";            xml += "<select><value>2</value><text>丰台</text></select>";            xml += "<select><value>3</value><text>海淀</text></select>";            xml += "<select><value>4</value><text>朝阳</text></select>";        } else if (targetId.equalsIgnoreCase("2"))        {            xml = "<select><value>1</value><text>塘沽区</text></select>";            xml += "<select><value>2</value><text>汉沽区</text></select>";            xml += "<select><value>3</value><text>大港区</text></select>";            xml += "<select><value>4</value><text>东丽区</text></select>";        } else        {// 如果是3,则返回下面的字符            xml = "<select><value>1</value><text>济南</text></select>";            xml += "<select><value>2</value><text>青岛</text></select>";            xml += "<select><value>3</value><text>淄博</text></select>";            xml += "<select><value>4</value><text>枣庄</text></select>";        }        String last_xml = xml_start + xml + xml_end;        response.getWriter().write(last_xml);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException    {        doGet(request, response);    }    public void init() throws ServletException    {    }}

web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">    <servlet>        <servlet-name>SelectServlet</servlet-name>        <servlet-class>com.SelectServlet</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>SelectServlet</servlet-name>        <url-pattern>/select</url-pattern>    </servlet-mapping>    <welcome-file-list>        <welcome-file>index.jsp</welcome-file>    </welcome-file-list></web-app>

0 0