ajax实现菜单级联组件设计

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

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

java 代码

源码1：

package duzn.soa;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class SOAData {

    private StringBuffer sb = new StringBuffer();
    private String objName = "";

    public String getXmlDoc(){
        return sb.toString();
    }

    public void beginSelectOptions(String objName){
        this.objName = objName;
        sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");
        sb.append("<root>");
        sb.append("<" + objName + " type=\"select\">");
    }

    public void beginSelectOptions(String objName, int index){
        this.objName = objName;
        sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");
        sb.append("<root>" + "\n");
        sb.append("<" + objName + " type=\"select\" index=\"" + index + "\">");
    }

    public void addSelectOption(String objContent, String objValue){
        sb.append("<option value=\"" + objValue + "\">");
        sb.append(objContent + "</option>");
    }

    public void endSelectOptions(){
        sb.append("</" + this.objName + ">");
        sb.append("</root>");
    }

    public void soaWrite(HttpServletResponse response){
        //设置输出的信息的格式及字符集
        response.setContentType("text/xml; charset=GB2312");
        response.setHeader("Cache-Control","no-cache");
        try {
            PrintWriter pw = response.getWriter();
            pw.println(getXmlDoc());
            pw.flush();
            pw.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /*public static void main(String[] args){
        SOAData soaData = new SOAData();
        soaData.beginSelectOptions("dept");
        soaData.addSelectOption("gdys", "1");
        soaData.addSelectOption("dzgc", "2");
        soaData.addSelectOption("jjgl", "3");
        soaData.endSelectOptions();
        System.out.println(soaData.getXmlDoc());
    }*/
}

java 代码

package duzn.soa;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SelectServlet extends HttpServlet{

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String fieldName = request.getParameter("fieldName");
        int branchId = 0;
        try {
            branchId = Integer.parseInt(request.getParameter("branchId"));
        } catch (NumberFormatException e) {
            branchId = 1;
            System.out.println(e.getMessage());
        }

        SOAData soaData = new SOAData();
        soaData.beginSelectOptions(fieldName);
        soaData.addSelectOption("--请选择--", "0");
        //在此根据branchId操作数据库查询数据
        if(branchId == 1){
            soaData.addSelectOption("办公室", "1");
            soaData.addSelectOption("财务处", "2");
            soaData.addSelectOption("党工办", "3");
        }else if(branchId == 2){
            soaData.addSelectOption("计算机系", "1");
            soaData.addSelectOption("经管系", "2");
            soaData.addSelectOption("电子系", "3");
        }

        soaData.endSelectOptions();
        System.out.println(soaData.getXmlDoc());
        soaData.soaWrite(response);
    }


}

xml 代码 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <servlet>
      <servlet-name>SelectServlet</servlet-name>
      <servlet-class>duzn.soa.SelectServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>SelectServlet</servlet-name>
    <url-pattern>/select.do</url-pattern>
  </servlet-mapping>
</web-app>

js 代码 xmlhttp.js

var xmlreq = false; //创建一个XMLHttpRequest对象

function newXMLHttpRequest() {
      if (window.XMLHttpRequest) {
            xmlreq = new XMLHttpRequest();  // 在非Microsoft浏览器中创建XMLHttpRequest对象
      } else if (window.ActiveXObject) {
        try {   //通过MS ActiveX创建XMLHttpRequest
            xmlreq = new ActiveXObject("Msxml2.XMLHTTP");   // 尝试按新版InternetExplorer方法创建
        } catch (e1) {
            try {   // 创建请求的ActiveX对象失败
                xmlreq = new ActiveXObject("Microsoft.XMLHTTP");    // 尝试按老版InternetExplorer方法创建
            } catch (e2) {
                 // 不能通过ActiveX创建XMLHttpRequest
            }
        }
      }
}


//发送请求函数-->业务流程
function sendXml(url, param){
    if(url.length == 0){
        return;
    }else{
        if( param == null || param == "undefined" ){
            param = "";
        }

        newXMLHttpRequest();
        try{
            xmlreq.onreadystatechange=proce;    //指定响应的函数 proce()
            xmlreq.open("GET", url, true);      //以GET方式传输数据，打开url，以异步方式
            xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlreq.send(param); //发送请求
        }catch(exception){
            alert("您要访问的资源不存在!");
        }
    }
}

//回调函数
function proce(){
    if(xmlreq.readyState == 4){     //对象状态
        if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;
            //alert(xmlreq.responseText);
            parseXml(xmlreq.responseXML);
        }else{
            window.alert("所请求的页面有异常");
            alert(xmlreq.statusText);
        }
    }
}

//解析xml文档
function parseXml(xmlDom){
    var rootNode = xmlDom.documentElement;
    if(rootNode == null){
        return false;
    }else{
        for(var node = rootNode.firstChild; node != null;  node=node.nextSibling){
            var objName = node.nodeName;
            var type = node.getAttribute("type");
            if(type == "select"){
                clearSelectOption(objName);
                var opts = node.getElementsByTagName("option");
                for(var i=0; i<opts.length; i++){
                    var optName = opts[i].firstChild.data;
                    var optValue = opts[i].getAttribute("value");
                    addSelectOption(objName, optValue, optName);
                }
            }
        }
    }

}

//往下拉列表框中写数据
function addSelectOption(objName, optValue, optName){
    var elmtObj = document.getElementById(objName);
    elmtObj.options[elmtObj.length] = new Option(optName, optValue);
}

//清空下拉列表框
function clearSelectOption(objName){
    var elmtObj = document.getElementById(objName);

    while(elmtObj.options.length > 0){
        elmtObj.remove(0);
    }

    //elmtObj.options.length = 0;
}

function sendText(url, param){
    if(url.length == 0){
        return;
    }else{
        if( param == null || param == "undefined" ){
            param = "";
        }

        newXMLHttpRequest();
        try{
            xmlreq.onreadystatechange=getText;  //指定响应的函数 getText()
            xmlreq.open("GET", url, true);      //以GET方式传输数据，打开url，以异步方式
            xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlreq.send(param); //发送请求
        }catch(exception){
            alert("您要访问的资源不存在!");
        }
    }
}

function getText(){
    if(xmlreq.readyState == 4){     //对象状态
        if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;
            alert(xmlreq.responseText);
        }else{
            window.alert("所请求的页面有异常");
            alert(xmlreq.statusText);
        }
    }
}

jsp代码 index.jsp

<%@ page contentType="text/html; charset=GB2312" pageEncoding="GB2312"%>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script lang="javascript" src="xmlhttp.js"></script>
<script>
    function branchChange(branchId){
        sendXml('select.do?fieldName=dept&branchId='+branchId, '');
    }
</script>
</HEAD>

<BODY>
    <div id="nn"></div>
    <form name="form1" method="post" action="">
        机构
        <select name="branch" onchange="branchChange(this.value)">
            <option value='0'>--请选择--</option>
            <option value='1'>行政机关</option>
            <option value='2'>教学管理</option>
        </select>
        &nbsp;部门
        <select name="dept"><option value="0">--请选择--</option></select>
</BODY>
</HTML>

• WebTest.rar (6.4 KB)
• 描述: 程序源码，解压后放在tomcat的webapps目录下可直接运行
• 下载次数: 710

分享到：

ant配置文件实例详解 | ajax简单级联菜单设计

• 2007-04-02 22:37
• 浏览 4908
• 评论(3)
• 论坛回复 / 浏览 (2 / 8508)
• 查看更多

评论

3 楼 salon 2007-04-25  

firefox下有问题啊

2 楼 Ghosts 2007-04-18  

uyiyiuyi

1 楼 liufeng 2007-04-04  

今天终于知道怎么生成XML文件了。也知道了怎么解析它的。呵呵。谢谢楼主

相关推荐

jquery无限级联下拉菜单简单实例演示

本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下： 最终效果图： 因为是级联，所以数据必须是树型结构的，这里的测试数据如下： 看下效果图： 1、...

AJAX基础概念、核心技术与典型案例(内涵动态实例)

WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章（/C16/） 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 第17章（/ch17） 程序描述：本章介绍开发AJAX...

Ajax的CascadingDropDown的使用

学习使用AjaxControlToolkit中的CascadingDropDown组件。CascadingDropDown主要是控制数个普通的DropDownList控件，并使它们产生无刷新的...学会CascadingDropDown组件将会大大简化我们开发无刷新级联下拉菜单的流程。

JavaScript全国城市三级联动代码

摘要:脚本资源,Ajax/JavaScript,城市联动菜单,全国城市菜单　Js全国城市三级联动代码，网页常用的组件，不过我感觉这一个城市级联菜单并没有使用Ajax异步加载技术，完全是用传统的JS实现的，全国城市信息写在area.js...

python入门到高级全栈工程师培训 第3期 附课件代码

09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery模态对话框与clone的应用 04 jqueryCSS操作之offsets,position以及scrolltop 05 jquery事件...

asp.net知识库

深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...

后台权限管理系统

这个权限系统demo没有MVC、没有ORM、数据库表都没设外键关系、...界面上的所有操作基本都是jquery发ajax请求ashx处理，ashx处理后输出json前台接收处理并配合easyui的组件响应给用户。基本没什么门槛，比较适合初学者。

老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

├─(25) 09 python s3 day43 jquery练习之左侧菜单.avi ├─(26) day43课件代码.rar (8)\\python全栈day41-50\\python全栈s3 day44；目录中文件数:10个 ├─(27) 01 python s3 day44 jquery属性操作之html,text,val...

Java学习笔记-个人整理的

{14.2}XML的设计}{205}{section.14.2} {14.3}DTD/Schema}{205}{section.14.3} {14.3.1}SAX应用}{206}{subsection.14.3.1} {14.4}dom4j}{207}{section.14.4} {14.5}XPath}{210}{section.14.5} {14.6}apache....

• ajax简单级联菜单设计

  2007-03-30 23:27 3386
  var xmlreq = false; //创建一个XMLHt ...

Global site tag (gtag.js) - Google Analytics