论坛首页 → Web前端技术论坛 →

ajax实现菜单级联组件设计

浏览 8510 次
锁定老帖子 主题：ajax实现菜单级联组件设计
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • duzn
  • 等级: 初级会员
  • 文章: 12
  • 积分: 68
   发表时间：2007-04-02  

今天抽时间写了一个关于级联菜单demo 可以实现多级级联，现已经打包供大家下载学习，自己写了一个简单的组件用来处理下拉列表框及联问题，在解析js脚本中的 parseXml(xmlDom)含糊还存在一些不足，处理同名的下拉列表框（根据生成的xml文件的index属性来处理），我会尽快完善，并会增加其他的功能，

希望这个设计对大家有所帮助，如果大家有好的想法，就请指正，谢谢！

java 代码
  1. 源码1：   
  2.   
  3. package duzn.soa;   
  4.   
  5. import java.io.IOException;   
  6. import java.io.PrintWriter;   
  7.   
  8. import javax.servlet.http.HttpServletResponse;   
  9.   
  10. public class SOAData {   
  11.   
  12.     private StringBuffer sb = new StringBuffer();   
  13.     private String objName = "";   
  14.        
  15.     public String getXmlDoc(){   
  16.         return sb.toString();   
  17.     }   
  18.        
  19.     public void beginSelectOptions(String objName){   
  20.         this.objName = objName;   
  21.         sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");   
  22.         sb.append("<root>");   
  23.         sb.append("<" + objName + " type=\"select\">");   
  24.     }   
  25.        
  26.     public void beginSelectOptions(String objName, int index){   
  27.         this.objName = objName;   
  28.         sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");   
  29.         sb.append("<root>" + "\n");   
  30.         sb.append("<" + objName + " type=\"select\" index=\"" + index + "\">");   
  31.     }   
  32.        
  33.     public void addSelectOption(String objContent, String objValue){   
  34.         sb.append("<option value=\"" + objValue + "\">");   
  35.         sb.append(objContent + "</option>");   
  36.     }   
  37.        
  38.     public void endSelectOptions(){   
  39.         sb.append("</" + this.objName + ">");   
  40.         sb.append("</root>");   
  41.     }   
  42.        
  43.     public void soaWrite(HttpServletResponse response){   
  44.         //设置输出的信息的格式及字符集   
  45.         response.setContentType("text/xml; charset=GB2312");   
  46.         response.setHeader("Cache-Control","no-cache");   
  47.         try {   
  48.             PrintWriter pw = response.getWriter();   
  49.             pw.println(getXmlDoc());   
  50.             pw.flush();   
  51.             pw.close();   
  52.         } catch (IOException e) {   
  53.             e.printStackTrace();   
  54.         }   
  55.     }   
  56.        
  57.     /*public static void main(String[] args){  
  58.         SOAData soaData = new SOAData();  
  59.         soaData.beginSelectOptions("dept");  
  60.         soaData.addSelectOption("gdys", "1");  
  61.         soaData.addSelectOption("dzgc", "2");  
  62.         soaData.addSelectOption("jjgl", "3");  
  63.         soaData.endSelectOptions();  
  64.         System.out.println(soaData.getXmlDoc());  
  65.     }*/  
  66. }   
java 代码
  1. package duzn.soa;   
  2.   
  3. import java.io.IOException;   
  4.   
  5. import javax.servlet.ServletException;   
  6. import javax.servlet.http.HttpServlet;   
  7. import javax.servlet.http.HttpServletRequest;   
  8. import javax.servlet.http.HttpServletResponse;   
  9.   
  10. public class SelectServlet extends HttpServlet{   
  11.   
  12.     @Override  
  13.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {   
  14.         String fieldName = request.getParameter("fieldName");   
  15.         int branchId = 0;   
  16.         try {   
  17.             branchId = Integer.parseInt(request.getParameter("branchId"));   
  18.         } catch (NumberFormatException e) {   
  19.             branchId = 1;   
  20.             System.out.println(e.getMessage());   
  21.         }   
  22.            
  23.         SOAData soaData = new SOAData();   
  24.         soaData.beginSelectOptions(fieldName);   
  25.         soaData.addSelectOption("--请选择--", "0");   
  26.         //在此根据branchId操作数据库查询数据   
  27.         if(branchId == 1){   
  28.             soaData.addSelectOption("办公室", "1");   
  29.             soaData.addSelectOption("财务处", "2");   
  30.             soaData.addSelectOption("党工办", "3");   
  31.         }else if(branchId == 2){   
  32.             soaData.addSelectOption("计算机系", "1");   
  33.             soaData.addSelectOption("经管系", "2");   
  34.             soaData.addSelectOption("电子系", "3");   
  35.         }   
  36.            
  37.         soaData.endSelectOptions();   
  38.         System.out.println(soaData.getXmlDoc());   
  39.         soaData.soaWrite(response);   
  40.     }   
  41.   
  42.        
  43. }  
xml 代码 web.xml
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.4"    
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"    
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee    
  6.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  7.          
  8.   <servlet>  
  9.       <servlet-name>SelectServlet</servlet-name>  
  10.       <servlet-class>duzn.soa.SelectServlet</servlet-class>  
  11.   </servlet>  
  12.        
  13.   <servlet-mapping>  
  14.     <servlet-name>SelectServlet</servlet-name>  
  15.     <url-pattern>/select.do</url-pattern>  
  16.   </servlet-mapping>  
  17. </web-app>  
js 代码 xmlhttp.js
  1. var xmlreq = false; //创建一个XMLHttpRequest对象   
  2.            
  3. function newXMLHttpRequest() {   
  4.       if (window.XMLHttpRequest) {   
  5.             xmlreq = new XMLHttpRequest();  // 在非Microsoft浏览器中创建XMLHttpRequest对象   
  6.       } else if (window.ActiveXObject) {   
  7.         try {   //通过MS ActiveX创建XMLHttpRequest   
  8.             xmlreq = new ActiveXObject("Msxml2.XMLHTTP");   // 尝试按新版InternetExplorer方法创建   
  9.         } catch (e1) {   
  10.             try {   // 创建请求的ActiveX对象失败   
  11.                 xmlreq = new ActiveXObject("Microsoft.XMLHTTP");    // 尝试按老版InternetExplorer方法创建   
  12.             } catch (e2) {   
  13.                  // 不能通过ActiveX创建XMLHttpRequest   
  14.             }   
  15.         }   
  16.       }   
  17. }   
  18.            
  19.   
  20. //发送请求函数-->业务流程   
  21. function sendXml(url, param){   
  22.     if(url.length == 0){   
  23.         return;   
  24.     }else{   
  25.         if( param == null || param == "undefined" ){   
  26.             param = "";   
  27.         }   
  28.   
  29.         newXMLHttpRequest();   
  30.         try{   
  31.             xmlreq.onreadystatechange=proce;    //指定响应的函数 proce()   
  32.             xmlreq.open("GET", url, true);      //以GET方式传输数据，打开url，以异步方式   
  33.             xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
  34.             xmlreq.send(param); //发送请求   
  35.         }catch(exception){   
  36.             alert("您要访问的资源不存在!");   
  37.         }   
  38.     }   
  39. }   
  40.   
  41. //回调函数   
  42. function proce(){   
  43.     if(xmlreq.readyState == 4){     //对象状态   
  44.         if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;   
  45.             //alert(xmlreq.responseText);   
  46.             parseXml(xmlreq.responseXML);   
  47.         }else{   
  48.             window.alert("所请求的页面有异常");   
  49.             alert(xmlreq.statusText);   
  50.         }   
  51.     }   
  52. }   
  53.            
  54. //解析xml文档   
  55. function parseXml(xmlDom){   
  56.     var rootNode = xmlDom.documentElement;   
  57.     if(rootNode == null){   
  58.         return false;   
  59.     }else{   
  60.         for(var node = rootNode.firstChild; node != null;  node=node.nextSibling){   
  61.             var objName = node.nodeName;   
  62.             var type = node.getAttribute("type");   
  63.             if(type == "select"){   
  64.                 clearSelectOption(objName);   
  65.                 var opts = node.getElementsByTagName("option");   
  66.                 for(var i=0; i<opts.length; i++){   
  67.                     var optName = opts[i].firstChild.data;   
  68.                     var optValue = opts[i].getAttribute("value");   
  69.                     addSelectOption(objName, optValue, optName);   
  70.                 }   
  71.             }   
  72.         }   
  73.     }   
  74.                
  75. }   
  76.   
  77. //往下拉列表框中写数据   
  78. function addSelectOption(objName, optValue, optName){   
  79.     var elmtObj = document.getElementById(objName);   
  80.     elmtObj.options[elmtObj.length] = new Option(optName, optValue);   
  81. }   
  82.   
  83. //清空下拉列表框   
  84. function clearSelectOption(objName){   
  85.     var elmtObj = document.getElementById(objName);   
  86.   
  87.     while(elmtObj.options.length > 0){   
  88.         elmtObj.remove(0);   
  89.     }   
  90.        
  91.     //elmtObj.options.length = 0;   
  92. }   
  93.   
  94. function sendText(url, param){   
  95.     if(url.length == 0){   
  96.         return;   
  97.     }else{   
  98.         if( param == null || param == "undefined" ){   
  99.             param = "";   
  100.         }   
  101.   
  102.         newXMLHttpRequest();   
  103.         try{   
  104.             xmlreq.onreadystatechange=getText;  //指定响应的函数 getText()   
  105.             xmlreq.open("GET", url, true);      //以GET方式传输数据，打开url，以异步方式   
  106.             xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
  107.             xmlreq.send(param); //发送请求   
  108.         }catch(exception){   
  109.             alert("您要访问的资源不存在!");   
  110.         }   
  111.     }   
  112. }   
  113.   
  114. function getText(){   
  115.     if(xmlreq.readyState == 4){     //对象状态   
  116.         if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;   
  117.             alert(xmlreq.responseText);   
  118.         }else{   
  119.             window.alert("所请求的页面有异常");   
  120.             alert(xmlreq.statusText);   
  121.         }   
  122.     }   
  123. }  
jsp代码 index.jsp
  1. <%@ page contentType="text/html; charset=GB2312" pageEncoding="GB2312"%>   
  2. <HTML>   
  3. <HEAD>   
  4. <TITLE> New Document </TITLE>   
  5.   
  6. <script lang="javascript" src="xmlhttp.js"></script>   
  7. <script>   
  8.     function branchChange(branchId){   
  9.         sendXml('select.do?fieldName=dept&branchId='+branchId, '');   
  10.     }   
  11. </script>   
  12. </HEAD>   
  13.   
  14. <BODY>   
  15.     <div id="nn"></div>   
  16.     <form name="form1" method="post" action="">   
  17.         机构   
  18.         <select name="branch" onchange="branchChange(this.value)">   
  19.             <option value='0'>--请选择--</option>   
  20.             <option value='1'>行政机关</option>   
  21.             <option value='2'>教学管理</option>   
  22.         </select>   
  23.         &nbsp;部门   
  24.         <select name="dept"><option value="0">--请选择--</option></select>   
  25. </BODY>   
  26. </HTML>   
  • WebTest.rar (6.4 KB)
  • 描述: 程序源码，解压后放在tomcat的webapps目录下可直接运行
  • 下载次数: 710
返回顶楼
         
  • liufeng
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 30
  • 来自: 北京
   发表时间：2007-04-04  
今天终于知道怎么生成XML文件了。也知道了怎么解析它的。呵呵。谢谢楼主
返回顶楼
          回帖地址
0 请登录后投票
  • salon
  • 等级: 初级会员
  • 文章: 1
  • 积分: 82
   发表时间：2007-04-25  
firefox下有问题啊
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics