Ajax实现二级联动菜单

前端之家收集整理的这篇文章主要介绍了Ajax实现二级联动菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

http://www.blogjava.net/supercrsky/articles/203698.html


index.jsp:

ExpandedBlockStart.gif

ContractedBlock.gif

<%

dot.gif

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

None.gif

< html >

None.gif

< head >

None.gif

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

ExpandedBlockStart.gif

ContractedBlock.gif

< script type ="text/javascript" >

dot.gif


InBlock.gif

var req;

InBlock.gif

window.onload
=function()

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{//页面加载时的函数

ExpandedSubBlockEnd.gif

}

InBlock.gif


ExpandedSubBlockStart.gif

ContractedSubBlock.gif

function Change_Select()

dot.gif

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

InBlock.gif

var province = document.getElementById('province').value;

InBlock.gif

var url ="select?id="+ escape(province);

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

if(window.XMLHttpRequest)

dot.gif

{

InBlock.gif

req
=new XMLHttpRequest();

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

}
elseif(window.ActiveXObject)

dot.gif

{

InBlock.gif

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

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

if(req)

dot.gif

{

InBlock.gif

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

InBlock.gif

//指定回调函数为callback

InBlock.gif

req.onreadystatechange = callback;

InBlock.gif

req.send(
null);

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockEnd.gif

}

InBlock.gif

//回调函数

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

function callback()

dot.gif

{

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

if(req.readyState ==4)

dot.gif

{

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

if(req.status ==200)

dot.gif

{

InBlock.gif

parseMessage();
//解析XML文档

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

}
else

dot.gif

{

InBlock.gif

alert(
"不能得到描述信息:"+ req.statusText);

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockEnd.gif

}

InBlock.gif

//解析返回xml的方法

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

function parseMessage()

dot.gif

{

InBlock.gif

var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档

InBlock.gif

var xSel = xmlDoc.getElementsByTagName('select');

InBlock.gif

//获得XML文档中的所有<select>标记

InBlock.gif

var select_root = document.getElementById('city');

InBlock.gif

//获得网页中的第二个下拉框

InBlock.gif

select_root.options.length=0;

InBlock.gif

//每次获得新的数据的时候先把每二个下拉框架的长度清0

InBlock.gif


ExpandedSubBlockStart.gif

ContractedSubBlock.gif

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

dot.gif

{

InBlock.gif

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

InBlock.gif

//获得每个<select>标记中的第一个标记的值,也就是<value>标记的值

InBlock.gif

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

InBlock.gif

//获得每个<select>标记中的第二个标记的值,也就是<text>标记的值

InBlock.gif


InBlock.gif

var option =new Option(xText,xValue);

InBlock.gif

//根据每组value和text标记的值创建一个option对象

InBlock.gif


ExpandedSubBlockStart.gif

ContractedSubBlock.gif

try

dot.gif

{

InBlock.gif

select_root.add(option);
//将option对象添加到第二个下拉框中

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

}
catch(e)

dot.gif

{

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockEnd.gif

}

ExpandedSubBlockEnd.gif

}

ExpandedBlockEnd.gif

</ script >

None.gif

</ head >

None.gif


None.gif

< body >

None.gif

< div align ="center" >

None.gif

< form name ="form1" method ="post" action ="" >

None.gif

< table width ="70%" border ="0" cellspacing ="0" cellpadding ="0" >

None.gif

< tr >

None.gif

< td align ="center" >

None.gif

二级联动示例

None.gif

</ td >

None.gif

</ tr >

None.gif

< tr >

None.gif

< td >

None.gif

< select name ="province" id ="province" onChange ="Change_Select()" >

None.gif

<!-- 第一个下拉菜单 -->

None.gif

< option value ="0" >

None.gif

请选择

None.gif

</ option >

None.gif

< option value ="1" >

None.gif

北京

None.gif

</ option >

None.gif

< option value ="2" >

None.gif

天津

None.gif

</ option >

None.gif

< option value ="3" >

None.gif

山东

None.gif

</ option >

None.gif

</ select >

None.gif

< select name ="city" id ="city" >

None.gif

<!-- 第二个下拉菜单 -->

None.gif

< option value ="0" >

None.gif

请选择

None.gif

</ option >

None.gif

</ select >

None.gif

</ td >

None.gif

</ tr >

None.gif

< tr >

None.gif

< td >

None.gif

</ td >

None.gif

< tr >

None.gif

</ table >

None.gif

</ form >

None.gif

</ div >

None.gif

</ body >

None.gif

</ html >

None.gif


SelectServlet:

None.gif

package com;

None.gif


None.gif

import java.io.IOException;

None.gif


None.gif

import javax.servlet.ServletException;

None.gif

import javax.servlet.http.HttpServlet;

None.gif

import javax.servlet.http.HttpServletRequest;

None.gif

import javax.servlet.http.HttpServletResponse;

ExpandedBlockStart.gif

ContractedBlock.gif

/** */ /***

InBlock.gif

*

InBlock.gif

*
@author zdw

InBlock.gif

*

ExpandedBlockEnd.gif

*/

None.gif

public class SelectServlet extends HttpServlet

ExpandedBlockStart.gif

ContractedBlock.gif

dot.gif

{

InBlock.gif


InBlock.gif

privatestaticfinallong serialVersionUID = 1L;

InBlock.gif


InBlock.gif

public SelectServlet()

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

super();

ExpandedSubBlockEnd.gif

}

InBlock.gif


InBlock.gif

publicvoid destroy()

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

super.destroy();

ExpandedSubBlockEnd.gif

}

InBlock.gif


InBlock.gif

publicvoid doGet(HttpServletRequest request,HttpServletResponse response)

InBlock.gif

throws ServletException,IOException

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

// response.setCharacterEncoding("GBK");

InBlock.gif

response.setContentType("text/xml");

InBlock.gif

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

InBlock.gif

request.setCharacterEncoding("GBK");

InBlock.gif

response.setCharacterEncoding("UTF-8");

InBlock.gif

String targetId = request.getParameter("id").toString();

InBlock.gif

System.out.println(targetId);

InBlock.gif

// 获得请求中参数为id的值

InBlock.gif

String xml_start = "<selects>";

InBlock.gif

String xml_end = "</selects>";

InBlock.gif

String xml = "";

InBlock.gif


InBlock.gif

if (targetId.equalsIgnoreCase("0"))

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

xml = "<select><value>0</value><text>请选择</text></select>";

ExpandedSubBlockEnd.gif

}
elseif (targetId.equalsIgnoreCase("1"))

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

xml = "<select><value>1</value><text>昌平</text></select>";

InBlock.gif

xml += "<select><value>2</value><text>丰台</text></select>";

InBlock.gif

xml += "<select><value>3</value><text>海淀</text></select>";

InBlock.gif

xml += "<select><value>4</value><text>朝阳</text></select>";

ExpandedSubBlockEnd.gif

}
elseif (targetId.equalsIgnoreCase("2"))

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

xml = "<select><value>1</value><text>塘沽区</text></select>";

InBlock.gif

xml += "<select><value>2</value><text>汉沽区</text></select>";

InBlock.gif

xml += "<select><value>3</value><text>大港区</text></select>";

InBlock.gif

xml += "<select><value>4</value><text>东丽区</text></select>";

ExpandedSubBlockEnd.gif

}
else

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{// 如果是3,则返回下面的字符

InBlock.gif

xml = "<select><value>1</value><text>济南</text></select>";

InBlock.gif

xml += "<select><value>2</value><text>青岛</text></select>";

InBlock.gif

xml += "<select><value>3</value><text>淄博</text></select>";

InBlock.gif

xml += "<select><value>4</value><text>枣庄</text></select>";

ExpandedSubBlockEnd.gif

}

InBlock.gif


InBlock.gif

String last_xml = xml_start + xml + xml_end;

InBlock.gif

response.getWriter().write(last_xml);

InBlock.gif


ExpandedSubBlockEnd.gif

}

InBlock.gif


InBlock.gif

publicvoid doPost(HttpServletRequest request,IOException

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

InBlock.gif

doGet(request,response);

ExpandedSubBlockEnd.gif

}

InBlock.gif


InBlock.gif

publicvoid init() throws ServletException

ExpandedSubBlockStart.gif

ContractedSubBlock.gif

dot.gif

{

ExpandedSubBlockEnd.gif

}

InBlock.gif


ExpandedBlockEnd.gif

}

None.gif


web.xml:

None.gif

<? xml version="1.0" encoding="UTF-8" ?>

None.gif

< web-app version ="2.4" xmlns ="http://java.sun.com/xml/ns/j2ee"

None.gif

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

None.gif

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

None.gif

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
>

None.gif

< servlet >

None.gif

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

None.gif

< servlet-class >com.SelectServlet </ servlet-class >

None.gif

</ servlet >

None.gif


None.gif

< servlet-mapping >

None.gif

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

None.gif

< url-pattern >/select </ url-pattern >

None.gif

</ servlet-mapping >

None.gif

< welcome-file-list >

None.gif

< welcome-file >index.jsp </ welcome-file >

None.gif

</ welcome-file-list >

None.gif

</ web-app >
原文链接:https://www.f2er.com/ajax/165785.html

猜你在找的Ajax相关文章