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
• 浏览 4989
• 评论(3)
• 论坛回复 / 浏览 (2 / 8538)
• 查看更多

评论

3 楼 salon 2007-04-25  

firefox下有问题啊

2 楼 Ghosts 2007-04-18  

uyiyiuyi

1 楼 liufeng 2007-04-04  

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

相关推荐

java实现Ajax级联菜单

在本案例中，我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax，即Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Java则是后端编程语言，...

AJAX实例的级联菜单

在实现AJAX级联菜单时，主要步骤如下： 1. 创建HTML结构，包括两个或多个级联的下拉菜单。 2. 使用JavaScript（如jQuery或其他库）监听第一个菜单的选择事件。 3. 当选择改变时，发送AJAX请求到服务器，传递选定的主...

ajax实现下拉列表级联

在本文中，我们将深入探讨如何使用Ajax技术来实现下拉列表的级联效果，这是一个常见的交互功能，特别是在数据录入和筛选场景中。我们将基于EJB（Enterprise JavaBeans）技术连接数据库，以动态加载和更新下拉列表...

运用ajax+jsp+servlet实现三级级联菜单

在这个案例中，我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三级级联菜单。 **AJAX (Asynchronous JavaScript and XML)** 是一种在不刷新整个网页的情况下，与服务器交换数据并更新部分网页的技术。它通过...

ajax三级级联无刷新 和批量上传文件

"ajax三级级联无刷新"是指在网页上使用Ajax技术实现省市区三级联动的效果，用户在选择一级区域（如省份）时，无需刷新整个页面，二级区域（如城市）会自动更新；接着选择二级区域，三级区域（如区县）也会随之动态...

struts+hibernate+ajax级联菜单

在"struts+hibernate+ajax级联菜单"项目中，MyProject可能是一个完整的Java Web工程，包含以下主要组件： 1. `struts.xml`：Struts配置文件，定义了Action类及其对应的URL路径和结果页面。 2. `hibernate.cfg.xml`：...

动态树形结构的级联菜单

常见的JavaScript库如jQuery、Vue.js、React.js等都有相应的组件或插件支持级联菜单的创建。 5. **数据绑定**：级联菜单的数据通常来自服务器，可以通过Ajax或Fetch API进行异步获取。数据结构一般包含节点ID、父...

H5城市级联插件

【H5城市级联插件】是一种基于HTML5技术实现的交互式用户界面组件，它主要用于在网页上展示城市选择的级联下拉菜单。这种插件在网站中广泛使用，尤其是在需要用户填写地址信息或者根据地理位置提供服务的场景下。它...

jQuery+ajax实现无刷新级联菜单示例

### jQuery+ajax实现无刷新级联菜单示例知识点 #### 知识点一：无刷新级联菜单概念 无刷新级联菜单是一种常见的Web界面组件，主要用于地区选择、分类筛选等场景。它允许用户在一个下拉列表中选择一个选项后，另一个...

实现级联效果

在软件设计中，级联结构通常指的是组件之间的依赖关系，其中一个组件的状态或行为改变会影响其他组件。比如，在面向对象编程中，一个类的方法可能会调用另一个类的方法，形成一种链式调用，这种级联调用有助于代码...

城市级联菜单

6. **前端框架和库**：现代网页开发中，常常会用到前端框架或库，如jQuery、Vue.js、React.js等，它们提供了丰富的API和组件，可以简化城市级联菜单的开发过程。例如，Vue.js的`v-for`指令可以轻松实现数据的遍历...

无限级级联菜单源码，asp.net，ajax

在IT领域，尤其是在Web开发中，无限级级联菜单是一种常见的交互设计，它允许用户通过逐级下拉的方式来浏览和选择深层次的结构化数据。在本案例中，我们讨论的是一段实现这种功能的源码，它基于ASP.NET和AJAX技术栈。...

jsp+json+mySql 实现二级级联下拉菜单

在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...

asp.net级联菜单

总的来说，使用JavaScript、ListBox和Control在ASP.NET中实现级联菜单需要结合客户端和服务器端的技术，通过JavaScript进行交互逻辑处理，利用ASP.NET控件展示菜单，同时通过AJAX技术实现数据的动态加载。...

JQuery写的日期级联下拉菜单

这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件，允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期，同时保持页面的简洁性...

php框架thinkphp实现js（ajax）无限添加级联下拉框

这个例子中的"php框架thinkphp实现js（ajax）无限添加级联下拉框"是关于如何利用ThinkPHP和JavaScript（AJAX）技术来创建一个动态的、可以无限级联的下拉菜单系统。下面我们将深入探讨这一主题。 1. **ThinkPHP框架...

4级级联菜单JQUERY+JSON版

在网页开发中，级联菜单（Cascading Menu）是一种常见的交互设计元素，它用于组织大量数据并提供层次化的导航体验。"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例...

seam级联菜单例子

级联菜单的实现可能涉及到`<h:selectOneMenu>`或`<p:selectOneMenu>`标签，其中`p:`是PrimeFaces组件库的前缀，而`h:`则是JSF的标准组件库前缀。这些组件可以配置成响应用户的选中事件，通过Ajax请求获取下一级菜单...

.net jquery无刷新级联菜单

总之，".net jquery无刷新级联菜单"是一个实用的前端组件，它结合了.NET的后端处理能力和jQuery的前端交互，实现了高效且流畅的三级菜单选择。对于初学者来说，这是一个很好的学习案例，可以帮助他们理解前后端交互...

select级联二级菜单

在网页开发中，"select级联二级菜单"是一种常见的交互设计，主要用于呈现具有层次结构的数据。这种设计使得用户可以通过选择一级菜单项来显示相应的二级菜单，进而进行更精确的选择。在给定的资源中，我们可以推测这...

• ajax简单级联菜单设计

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

Global site tag (gtag.js) - Google Analytics