ajax菜单级联实例

 第一步:在相应的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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=GBK" >
< link  href ="css/style.css"  rel ="stylesheet"  type ="text/css" >
< SCRIPT  language ="javascript"  src ="js/ajax.js" ></ SCRIPT >
< script  type ="text/javascript" > ...
 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 >
当中其他代码略

  < td  class ="dgl" > 集团; </ td >
      < td  align ="left" >
      < html:select  property ="banId"  onchange ="showDepList();" >
         调用onchange事件

           < html:options  collection ="banList"  property ="id"  labelProperty ="name" />
        </ html:select ></ td >
      < td  class ="dgl" > 部门 </ td >
      < td  align ="left" >
    
   < 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