ajax二级联动菜单

最新推荐文章于 2022-01-19 22:31:41 发布

这么慢那么美

最新推荐文章于 2022-01-19 22:31:41 发布

阅读量986

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xml 文档 encoding border action

本文链接：https://blog.youkuaiyun.com/yanchao1023/article/details/5831034

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