Ajax实现二级联动菜单

来源：互联网发布：淘宝新店采集软件编辑：程序博客网时间：2024/04/30 04:03

这个例子是自己试验成功过了的，从中能够了解到细节的东西。

------------------JSP页面--------------------

-------------------------------------------------

<%@ page language="java" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<%!ajax._Data data = new ajax._Data();%>

<head>

<title>My JSP 'index.jsp' starting page</title>

</head>

//创建连接，判断浏览器

var http_request=false;

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq=new XMLHttpRequest(); //创建对象对应不同的浏览器

}

else if(window.ActiveXObject){

try{

XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

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

}catch(e){

}

//onchange事件

function changeProvice(){//当第一个下拉框的选项发生改变时调用该函数

var province=document.getElementById("provice").value; //获取第一级菜单的值

sendRequest("ajaxtest?province="+province); //发送参数到SERVLET

//值得注意的是URL的servlet地址前面不加“/”并且为小写字母（试验的结论）

}

//发送请求

function sendRequest(url){ //发送函数

createXMLHttpRequest();

XMLHttpReq.open("GET",url,true);

XMLHttpReq.onreadystatechange=progessRequest;//调用相关的XML接受函数

XMLHttpReq.send(null);

}

//判断接收请求

function progessRequest(){

if(XMLHttpReq.readyState==4){

if(XMLHttpReq.status==200){

var xmlDoc=XMLHttpReq.responseXML; //获取返回的XML文档

var citys=xmlDoc.getElementsByTagName("city");//获取XML节点

var obj=document.getElementById("city");//获取第二级菜单的对象

if(obj!=null){//如果不为空就置空

obj.options.length=0;

}

for(var i=0;i<citys.length;i++){//用循环给select中加值

var xValue = citys[i].childNodes[0].firstChild.nodeValue;

var xText = citys[i].childNodes[1].firstChild.nodeValue;

var option = new Option(xText, xValue);

try{

obj.add(option);

}catch(e){}

}

}else{

alert( "请求异常"+XMLHttpReq.responseText);

}

</script>

<body>

<table>

<tr>

<td>

请选择

</option>

广西

</option>

广东

</option>

</select>

请选择

</option>

</select>

</td>

</tr>

</table>

</body>

</html>

-----------------------------------------servlet文件-------------------------------------------

---------------------------------------------------------------------------------------------------

package ajax;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ajaxtest extends HttpServlet {

private static final long serialVersionUID = 7078254784406906185L;

public ajaxtest() {

super();

}

public void destroy() {

super.destroy();

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

_Data data = new _Data();//从数据库获取数据的类

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("UTF-8");

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

ArrayList<City> city = new ArrayList<City>();

city = data.getCity(province);

String xml_start = "<citys>";

String xml_end = "</citys>";

String xml = "";

for (int i = 0; i < city.size(); i++) {

xml += "<city><value>" + city.get(i).getId() + "</value><text>"

+ city.get(i).getName() + "</text></city>";

}

String last_xml = xml_start + xml + xml_end;

response.getWriter().write(last_xml);

response.getWriter().flush();

response.getWriter().close();

}

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.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<description>This is the description of my J2EE component</description>

<display-name>This is the display name of my J2EE component</display-name>

<servlet-name>AJAXtest</servlet-name>

<servlet-class>ajax.ajaxtest</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AJAXtest</servlet-name>

<url-pattern>/ajaxtest</url-pattern>

</servlet-mapping>

<description>This is the description of my J2EE component</description>

<display-name>This is the display name of my J2EE component</display-name>

<servlet-name>SelectServlet</servlet-name>

<servlet-class>ajax.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>

2009-2-5