`
fangbubu
  • 浏览: 42824 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ajax实现无刷新级联菜单(使用mootools)

    博客分类:
  • Ajax
阅读更多

使用了mootools Ajax的方法,不过其他的还是没有改成它封装好的方法,第一次用 mootools将就一下吧 >.<!!

<script type="text/javascript" src="../jscript/mootools-release-1.11.js"></script>
<script type="text/javascript">
//Ajax-------------------------------------
	var myAjax;
	function sendRequest(url){
		myAjax = new Ajax(url,{method: 'post',onComplete:updateList});
		//设置Header,便于后台区分请求的类型
		//当捕捉到Ajax请求后需要设置response.setContentType("text/xml")
		//否者会出现抓取后台请求的XML文件为空的现象
		myAjax.setHeader('RequestType','ajax');
		myAjax.request();
	}
	
	function refreshList() {
        var section = document.getElementById("触发的下拉菜单ID").value;         
        if(section == "" ) {
          clearList();
          return;
        }
        var url = "调用的后台链接" + section;           
           sendRequest(url);
     }

     function updateList(txt,xml) {
        clearList();
        //alert(xml.xml);
        var product = document.getElementById("要动态出现结果的菜单ID"); 
        var results = xml.getElementsByTagName("xml取的TagName");
        var option = null;
        for(var i = 0; i < results.length; i++) {
          option = document.createElement("option");
          option.value=personId[i].firstChild.nodeValue;
          option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
          product.appendChild(option);
        }
     }

     function clearList() {
        var product = document.getElementById("要动态出现结果的菜单ID");
        while(product.childNodes.length > 0) {
          product.removeChild(product.childNodes[0]);
        }
     }
</script>

 

分享到:
评论

相关推荐

    无刷新级联菜单

    在实现无刷新级联菜单时,通常会用到两种关键技术:**Jquery** 和 **Ajax**。**Jquery** 是一个流行的JavaScript库,简化了DOM操作、事件处理和动画效果,使得在前端构建动态交互变得简单。**Ajax**(Asynchronous ...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    Ajax 实现级联菜单

    在本项目中,Ajax被用来实现级联菜单的效果,即一个下拉菜单的选择会影响另一个下拉菜单的内容,这种交互方式常见于数据层级关系丰富的表单中。下面将详细介绍Ajax实现级联菜单的相关知识点。 1. **异步通信**: ...

    用AJAX实现的级联菜单

    AJAX(Asynchronous JavaScript and XML)技术可以有效地实现级联菜单的动态加载和交互,无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页的...

    三级行业动态无刷新 级联菜单

    总结来说,“三级行业动态无刷新级联菜单”是一个利用Ajax实现的交互式菜单系统,它可以提供流畅的多级选择体验,避免页面刷新带来的不便。掌握这种技术对于前端开发者来说是非常有价值的,它能够提升网站的性能和...

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

    ### jQuery+ajax实现无刷新...通过上述知识点的介绍,可以了解到使用jQuery和ajax实现无刷新级联菜单的基本原理和实现方式。通过结合前端JavaScript与后端服务的数据交互,能够实现功能丰富、响应迅速的Web应用界面。

    ajax实现可配置无刷新级联下拉框

    在这里,我们主要关注如何使用 Ajax 实现可配置的无刷新级联下拉框。 1. **HTML 结构** 在 HTML 页面中,我们需要创建两个下拉框,一个用于父级选择,另一个用于子级。每个下拉框都有一个唯一的 ID,以便于在 ...

    .net jquery无刷新级联菜单

    为了实现无刷新,我们使用`.html()`或者`.append()`方法更新DOM,将新的下拉列表内容插入到页面中。 此外,这个插件的设计应该是模块化和可配置的,允许开发者自定义各种参数,如初始加载的级联数据、请求URL、菜单...

    级联菜单 级联菜单级联菜单级联菜单

    级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...

    Ajax (jQuery) 全国城市三级级联菜单插件

    在本案例中,我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件,它使得用户能够在下拉菜单中选择省份、城市以及区县,以实现快速筛选或输入数据的目的。 首先,jQuery是一个广泛使用的JavaScript库,它简化...

    级联菜单 动态级联菜单

    动态级联菜单的实现可以通过多种方式,例如使用javascript、JQuery、Ajax等技术。其中,使用javascript和服务器端脚本结合的方式是最为常见的。 在上面的代码中,我们可以看到使用了VBScript作为服务器端脚本语言,...

    jsp实现级联菜单 jsp实现级联菜单

    本文将详细介绍如何使用JSP技术实现一个简单的级联菜单功能。 #### 二、基础知识简介 1. **JSP (Java Server Pages)**:是一种基于Java技术的动态网页技术标准,用于创建动态网页内容。它允许开发者将HTML代码与...

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

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

    使用Ajax实现三级级联菜单获取区号与邮政编码 PHP MySQL

    在本文中,我们将深入探讨如何使用Ajax技术来实现一个三级级联菜单,该菜单能够动态地获取并显示区号和邮政编码。这个功能是通过PHP和MySQL数据库进行后端处理来实现的,使得用户能够在前端界面中流畅地选择地理位置...

    AJAX实例的级联菜单

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

    级联菜单的实现

    在Windows操作系统中,级联菜单的实现通常涉及到Windows API(应用程序接口)的使用。开发者可以通过调用`CreateMenu`函数创建一个空白菜单,然后使用`AppendMenu`或`InsertMenu`向菜单中添加菜单项。如果某个菜单项...

    Ajax征服——无限级级联菜单

    在本教程中,我们将深入探讨如何使用Ajax技术实现无限级级联菜单,提升用户体验。 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。这使得网页...

    用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)

    在本文中,我们将深入探讨如何使用jQuery库进行AJAX(异步JavaScript和XML)开发,通过实际案例来学习包括级联菜单、谷歌式搜索提示和可编辑表格在内的常见功能。这些功能都允许用户在不刷新整个页面的情况下与网页...

Global site tag (gtag.js) - Google Analytics