用ajax显示逐级树形菜单,纯ajax＋sqlserver无限级树形菜单

刘兮

于 2021-08-05 18:12:15 发布

阅读量329

点赞数

文章标签：用ajax显示逐级树形菜单

本文回顾了AJAX技术的发展，介绍了如何利用AJAX动态加载树形菜单，通过创建XMLHttpRequest对象、发送GET请求以及处理服务器响应，实现了当用户点击节点时异步加载子菜单。作者还分享了创建树形菜单的数据库设计和关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax这个当今流行的技术名词,几年前ajax开始流行时,也花过点时间研究了一下ajax.net控件．只是工作原因，一直没有用到项目中去．一晃几年ajax依旧如火如荼．最近闲来无事，重温ajax．就好象AJAX当初被遗弃，现在又被热捧一样．这次我没有去下载ajax.net,altas等控件．而是从ajax基础看起，呵呵，一种一切从头开始开始感觉．

ibm中国开发区翻译的＜掌握Ajax系列＞几篇文章写的不错．想了解ajax的基础朋友可以去看看．

做过web开发的朋友,一定都收藏了javascrip树形菜单，我也有．Javascript树形菜单和我这次写的ajax树形菜单最大不同点是ajax树形菜单不是一次性将菜单的全部数据提出来．而是当点了节点时才去从数据库中读取该节点的子树信息，再加载到DIV标签中，而javascript是一次性将数据全部读出来．两者的相同点就是显示子树时，都不会刷新页面．效果图如下:

现实步骤:1、新建表，并在表中添加数据。这里要注意的是，树形菜单的数据都是从这个表中读出来，表结构设计要做到无限级。

CREATE TABLE [dbo].[SysBaseData](

[BaseDataID] [int] NOT NULL,

[BaseDataCode] [char](10) NOT NULL,

[BaseDataName] [varchar](30) NOT NULL,

[ParentCode] [char](10) NOT NULL,

[Description] [varchar](100) NULL,

[LevelType] [int] NOT NULL,

[VaildType] [char](1) NOT NULL,

[PathCode] [varchar](100) NULL,

[SerialNumberID] [int] NOT NULL,

CONSTRAINT [PK_SysBaseData] PRIMARY KEY NONCLUSTERED

(

[BaseDataID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

2、新建树形菜单显示文件LeftTreeAjax.html。

(1)createXMLHttpRequest()创建xnlHttp对象，由于不同的浏览器XMLHttpRequest控件名不同。代码种用了几个try。这样几种主流的浏览器都可以兼容呢。

//创建对象function createXMLHttpRequest()

...{

var isRight = true;

try...{ xmlHttp = new XMLHttpRequest(); }

catch(trymicrosoft)

...{

try...{xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");}

catch(othermicrosoft)

...{

try...{xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");}

catch(failed)

...{

isRight = false;

}

if(!isRight)

alert("XML对象创建失败");

}

(2) GetData(ID)单击节点时，调用该函数。该函数发送请求给CreateTreeAjax.aspx．

//获取数据function GetData(ID)

{

ParID = document.getElementById("M1_" + ID);

ShowID = document.getElementById("M2_" + ID);

if(ShowID.innerHTML != "")

{

if(ShowID.style.display == "none")

ShowID.style.display = "block";

else

ShowID.style.display = "none";

ShowFolderICO();

return;

}

ShowID.style.display = "block";

ShowID.innerHTML = "Loading Tree ……";

var Url = "CreateTreeAjax.aspx?ID=" + ID;

createXMLHttpRequest();

xmlHttp.onreadystatechange = ShowTree;

xmlHttp.open("GET", Url, true);

xmlHttp.send(null);

}

(3)ShowTree()显示子树，CreateTreeAjax.aspx反回子树信息，ShowTree()获取信息，并加载到DIV标签中．

//此方法直接从服务器端返回HTML

function ShowTree()

{

if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200)

{

ShowID.innerHTML = xmlHttp.responseText;

// alert(xmlHttp.responseText);

ShowFolderICO();

//alert(M1_DCCK.innerHTML);

}else

{

ShowID.innerHTML = "数据获取错误！"+xmlHttp.status;

}

2、新建创建子树的文件CreateTreeAjax.aspx,CreateTreeAjax.aspx.cs

CreateTreeAjax.aspx文件中只要这一句，其它的都删除

CreateTreeAjax.aspx.cs根据接收到ID，读取子树信息。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：csdn