Ajax二级联动菜单实现原理及代码

　　index.jsp:

复制代码代码如下:

　　<%@ page language="java" pageEncoding="UTF-8"%>

　　<html>

　　<head>

　　<title>二级菜单联动演示</title>

　　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>

　　<tr>

　　二级联动示例

　　</td>

　　</tr>

　　<tr>

　　<td>

　　请选择

　　</option>

　　北京

　　</option>

　　天津

　　</option>

　　山东

　　</option>

　　</select>

　　请选择

　　</option>

　　</select>

　　</td>

　　</tr>

　　<tr>

　　<td>

　　</td>

　　<tr>

　　</table>

　　</form>

　　</div>

　　</body>

　　</html>

　　SelectServlet:

复制代码代码如下:

　　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-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>

教程首页更多教程