ajax如何逐级分层对应获取xml文档数据？

最新推荐文章于 2024-05-11 19:38:32 发布
最新推荐文章于 2024-05-11 19:38:32 发布
阅读量291 收藏
点赞数
分类专栏： asp.net 文章标签： xml ajax 文档 xhtml function div
 

如下是一个点击逐级展开的4层目录树效果，目录树中的数据从一个非常大的相同结构的xml文件中获取，当打开页面时，获取对应的前两层数据，当鼠标点击一个列表项，再实时获取这个列表项下两层（就是下下层，因为下一层开始时已获取）的数据。
----------------------

出自http://bbs.blueidea.com/viewthread.php?tid=2676250

========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
ul{
 font-size:12px;
}
li{
 cursor:pointer;
}
</style>
<title>分类显示</title>
</head>
<body>
<div>
  <div>
    <div>
      <ul id="layerUnspsc1">
        <li>第1层节点
          <ul>
            <li>第2层节点
              <ul>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>第2层节点
              <ul>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>第1层节点
          <ul>
            <li>第2层节点
              <ul>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>第2层节点
              <ul>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
                <li>第3层节点
                  <ul>
                    <li>第4层节点</li>
                    <li>第4层节点</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
var layerUnspsc1=document.getElementById("layerUnspsc1");
var layerUnspsc1_li=layerUnspsc1.getElementsByTagName("li");
for(var i=0;i<layerUnspsc1_li.length;i++){
 for(var j=0;j<layerUnspsc1_li[i].childNodes.length;j++){
  var ul=layerUnspsc1_li[i].childNodes[j];
  if(ul.nodeName=="UL"){
   ul.style.display="none";
  }
 }
}
layerUnspsc1.οnclick=function(nav){
 var li=(document.all)?event.srcElement:nav.target;
 if(li.nodeName=="LI"){
  for(var a=0;a<li.childNodes.length;a++){
   var ul=li.childNodes[a];
   if(ul.nodeName=="UL"){
    ul.style.display=(ul.style.display=="none")?"":"none";
   }
  }
 }
}
</script>
</body>
</html> 

 

转：

waxiang767
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS使用ajax从xml文件动态获取数据显示的方法
10-24
主要介绍了JS使用ajax从xml文件动态获取数据显示的方法,实例分析了javascript使用Ajax技术操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
怎样使用Ajax 简化我们的分层设计
zz78_gang
08-07 104
不打算写太长,只写一个方面:简化我们的分层设计，反馈好的话，接着写... 正常情况下,我们的系统 分为 entity dataaccess business ui 四层,这个我就不罗嗦了. 考虑如下常见情况(举个最简单的例子) 比如有两张表: User, Experience. Experience 有一个外键,指向User 考虑没有Ajax的情况，要实现这样一个简单的页面...
jQuery+ajax读取并解析XML文件的方法
milijiangjun的博客
06-12 2507
转自自：https://www.jb51.net/article/92329.htmajax.xml：?1234567891011&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;stulist&gt;&lt;student email="[email protected]"&gt;&lt;name&gt;zhangsan&lt;/name
纯AJAX的项目的分层
狂奔 Lion
11-07 134
一个纯的AJAX项目如何进行分层，这里没有了form请求就没必要一个请求转发结构了吧，也就没有了针对页面的action处理了吧，后面听论坛上人们常说的service也要进行变化了吧？ 还是我把所有的AJAX请求当成一个Action来处理？（没有了数据的转换，不知道Action还有什么用？） 那么我是否应该针对每个功能设计一个Service，然后呢把公共的Service抽象出来被继承或包含呢...
asp.net面试题
代码改变生活
01-14 1263
.net 1、   ASP.NET里命名空间的定义; 答：命名空间是类的逻辑分组，它组织成一个层次结构——逻辑树。这个树的根是System。 在ASP.NET页面中，可以默认的使用某些命名空间中包含的类，称做标准的ASP.NET命名空间。对于其他命名空间，则必须显式地导入 2、   .net中类与对象的关系; 答：万物都是对象，而类是对象的一个编程语言概念上的描述 3、   Ispo
五面腾讯斩获offer定级T3-2，附2021年最新最全136道面试真题
dhlnb的博客
11-24 746
在互联网做了几年之后，去大厂“镀镀金”是大部分人的首选。大厂不仅待遇高、福利好，更重要的是，它是对你专业能力的背书，大厂工作背景多少会给你的简历增加几分竞争力。 但说实话，想进大厂还真没那么容易。我的一个朋友在入职腾讯之前，大大小小的面试经历了十几次，最后终于在 4 轮技术面+1 轮 HR面之后成功收到 Offer，40k*16 薪！ 第一轮主要考察 Java 基础，比如： hashmap的实现 Java中的垃圾回收 除了代码之外你还学习了什么技术，框架 死锁是怎
五面腾讯斩获offer定级T3-2，2024年最新最全136道面试真题
2401_84048179的博客
04-19 561
什么是ActiveMQ?ActiveMQ服务器宕机怎么办？丢消息怎么办？持久化消息非常慢怎么办？消息的不均匀消费怎么办？死信队列怎么办？ActiveMQ中的消息重发时间间隔和重发次数吗？
2022春招Web前端高频面试题（自用，附答案）
萌萌哒的瑞萌萌的博客
04-30 2641
文章目录JS数据类型null 和 undefined 的区别？数据类型判断方法如何实现 copy 一个数组深拷贝和浅拷贝在内存上的区别JQuery 和 Vue 的区别和各自的优点请问定位布局 position 属性有哪些取值？请问你了解浮动布局 float 属性吗盒模型请问 BFC 布局有哪些特点、触发条件以及实际应用CSS 选择器以及优先级说一下原型链，原型对象this指向call apply bind 区别/ 改变 this 指向的方法详细说一下闭包和箭头函数，闭包和箭头函数分别解决了什么问题？HTML
刷完这套微服务+多线程+源码+分布式+调优试题，年薪50w还会是问题吗
程序媛小琬的博客
05-29 797
最近想面试的小伙伴想必都在着手准备吧！那么今天我们就来看看！ 在本篇文章开始之前，我想先来回答一个问题：我为什么要写这样一篇关于面试的文章？ 原因有三个：第一，我想为每一个为梦想时刻准备着的“有心人”，尽一份自己的力量，提供一份高度精华的Java面试清单。 第二，目前市面上的面试题不是答案不准确就是内容覆盖面太窄，所以提供一份经典而又准确的面试题是非常有必要的。 第三，本文会对部分面试题提供详细解读和代码案例，让读者知其然并知其所以然，从而学到更多的知识。
Ajax如何传输Json和xml数据
12-02
ajax传输xml数据：只要把数据封装成xml格式就可以实现传输，前台js用responseXML接收xml参数，后台读取用流和dom4j来解析 前台页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> ...
基于iframe实现ajax跨域请求 获取网页中ajax数据
10-22
主要介绍了基于iframe实现ajax跨域请求，并获取网页中ajax数据，如何利用网页ajax请求暴露出来的接口去抓取网页数据？需要的朋友可以参考下
jQuery基于Ajax实现读取XML数据功能示例
10-18
主要介绍了jQuery基于Ajax实现读取XML数据功能,结合实例形式分析了jQuery基于ajax的get方式获取xml文件数据并输出显示相关操作技巧,需要的朋友可以参考下
XMl发展前景及相关领域
wsl3465205046的博客
05-11 255
随着互联网和信息技术的不断发展，XML将继续发挥其重要的作用，为数据交换、系统集成和数据处理等领域提供解决方案。数据交换和存储：XML提供了一种通用的数据格式，可以用于在不同系统之间交换数据，同时也可以作为一种存储数据的格式。数据分析和处理：XML提供了一种结构化的数据表示方式，可以用于数据的分析和处理。通过使用XML，可以更方便地进行数据的查询、过滤和转换等操作，提升数据处理的效率和灵活性。数据标准化和集成：XML可以用于定义和描述数据的结构和格式，使得不同系统之间可以更易于集成和共享数据。
android xml 定义渐变色背景
dengfuma的专栏
05-11 117
android xml 定义渐变色背景
XML元素
最新发布
wsl3465205046的博客
05-11 105
【代码】XML元素。
XML标记语言
wsl3465205046的博客
05-11 143
它是一种通用的框架，可以用来设计和实现各种不同的标记语言，如HTML、XML和SGML。通用标记语言的一个重要特点是它的可扩展性，可以通过添加新的元素和属性来扩展标记语言的功能和表达能力。XML使用自定义的标记来组织和嵌套数据，这些标记以尖括号（< >）包围，并且可以使用属性来提供关于数据的其他信息。它使用特定的标记标签来包围和标识文本中的元素，从而使计算机能够理解和解释这些元素的含义。它不是一种具体的数据格式，而是一种用于定义其他数据格式的元语言，也就是说，它可以用来定义各种各样的数据格式。
详解xml-java语言
weixin_54454406的博客
05-06 1003
有些内容不想让解析引擎执行，而是当做原始内容，可以使用CDATA包括起来，CDATA节中的所有字符都会被当做简单文本，而不是XML标记。CDATA[这里就是可以把你输入的字符原样显示，不会解析xml]]>可以把你输入的字符原样输出，除了]]>。也是不能嵌套的。简单点来说：如果你希望吧某些字符串，当做普通文本，使用CDATA包括。Dom4j是一个简单的灵活的开放源代码的库（主要是用于解析/处理XML文件）。Dom4j是由早期开发JDOM的人分离开发出来的。
你管写死的数据叫Ajax后端获取？
05-18
不是的。AJAX（Asynchronous JavaScript and XML）是一种使用 JavaScript、XMLHttpRequest 和 ...比如前端页面使用 AJAX 技术向后端发起请求获取数据，后端再使用相应的后端语言从数据库中获取数据并返回给前端。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值