ajax菜单级联实例

sophia_230

浏览: 120654 次
性别:
来自: 上海

最近访客更多访客>>

ITStyle

知耻而后勇

gavin2lee

rjzou2006

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax MVC Servlet CSS JavaScript

第一步:在相应的jsp页面导入ajax.js

本实例采用如下的js:

* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp = false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {

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

} catch (e) {

try {

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

} catch (e2) {

xmlHttp = false;

}

@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

xmlHttp = new XMLHttpRequest();

}

function callServer(url, callback) {

// Open a connection to the server

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

// Setup a function for the server to run when it's done

xmlHttp.onreadystatechange = callback;

// Send the request

xmlHttp.send(null);

}

function callServerPost(url, callback, params) {

xmlHttp.open("post", url, true);

xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

// Setup a function for the server to run when it's done

xmlHttp.onreadystatechange = callback;

// Send the request

xmlHttp.send(params);

}

function selectSwith(elementId) {

var select = document.getElementById(elementId);

var input = document.getElementById(elementId + "Other");

if (select != null && input != null) {

if (select.value == "other") {

input.style.display="inline";;

} else {

input.style.display="none";

}

第二步: 在相应的jsp页面中写入如下代码:

<html>

<head>

function showDepList(){

var f=document.forms[0];

var url="showDepList?id="+f.banId.value;

<%--上面一句调用相应的servlet ,传入相应的集团id--%>

xmlHttp.open('get',url,true);

xmlHttp.onReadyStateChange=handDepListState;

<%--上面一句调用相应的Change事件--%>

xmlHttp.send(null);

}

function handDepListState(){

if(xmlHttp.readyState==4){

<%--readyState=4表示已经准备好--%>

if(xmlHttp.status==200){

<%--status==200表示状态正常--%>

var f=document.forms[0];

var xml=xmlHttp.responseXml;

<%--接收到相应的xml文件--%>

var items=xml.getElementsByTagName('item');

<%--获得item标记下的所有子节点--%>

var length=f.depId.options.length;

for(var i=0;i<length;i++){

f.depId.options.remove(0);

<%--清空相应的下拉菜单中的选项--%>

}

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

<%--遍历每子项目--%>

var item = items[i];

var id = item.getAttribute("id");

var text = item.getAttribute("text");

<%--取得每个子项中id和text属性的值--%>

f.depId.options.add(new Option(text,id));

<%--将相应的值加载到下拉列表框中--%>

}

</script>

</head>

<body>

当中其他代码略

<html:select property="banId" onchange="showDepList();">

调用onchange事件

<html:options collection="banList" property="id" labelProperty="name"/>

</html:select></td>

<html:select property="depId">

<html:options collection="depList" property="id" labelProperty="name"/>

</html:select>

</td>

</body>

</html>

第三步:编写相应的servlet

package com.ssc.mvc.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.ssc.mvc.Common;

import com.ssc.mvc.MvcException;

import com.ssc.mvc.persist.entity.SDep;

import com.ssc.mvc.service.DepService;

public class GetDepListServlet extends HttpServlet

分享到：

XmlHttp.open函数 | XMLHTTP对象参考之status

2007-11-23 14:58
浏览 1538
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论