用 ajax写一个
创新互联建站专注于红古网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供红古营销型网站建设，红古网站制作、红古网页设计、红古网站官网定制、小程序定制开发服务，打造红古网络公司原创品牌,更为您提供红古网站排名全网营销落地服务。
script language="javascript" type="text/javascript"
var xmlrequest=null;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
//针对IE以外的其他浏览器创建的 主要是FireFox
xmlrequest=new XMLHttpRequest();
}else if(window.ActiveXObject)
{
//主要针对IE浏览器的不同版本
try{
xmlrequest=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e)
{
try{
xmlrequest=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
}
}
}
}
function showCity()
{
createXMLHttpRequest();
var url="showCity.do";
var parentid=document.getElementById("province").value;
xmlrequest.open("post",url,true);//创建连接
//设置头信息,告诉服务器如何识别请求数据
xmlrequest.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
//设置响应处理的回调函数 所谓的回调函数 就是一个专门处理服务器发回响应的函数
//这个值只能是一个函数名 不能加上()
xmlrequest.onreadystatechange=processResponse;
//调用send方法开始发送数据
xmlrequest.send("parentid="+parentid);
}
function processResponse()
{
//readyState=1时:开始发送请求
//readyState=2时:对象请求发送完成
//readyState=3时:开始读取服务器响应
//readyState=4时:对象读取服务器响应结束
if(xmlrequest.readyState==4)//调用xmlrequest的readyState方法得到服务器发回的响应结果
{
if(xmlrequest.status==200)
{
var userdiv=document.getElementById("cityDIV");
userdiv.innerHTML=xmlrequest.responseText;//查询成功返回servlet的out内容.
}
}else
{
var userdiv=document.getElementById("cityDIV");
userdiv.innerHTML="img src='image/1.gif'/";//查询受阻时显示等待gif动画
}
}
/script
下面是放在body里面的
select id="province" onchange="showCity()"
option value="1"浙江/option
option value="2"湖南/option
option value="3"湖北/option
/select
div id="cityDIV"
/div
最后写一个showCity.do的servlet用来调用数据
servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String parentid=request.getParameter("parentid");//得到jsp页面传输过来您所选的省的参数
ListArea list=new AreaDao().getCity(Integer.parseInt(parentid));
//getCity()是通过传入省参数返回一个装有该省下所有城市列表的list集合
PrintWriter out = response.getWriter();
//以下拉框代码输出城市
out.println("select name='city' ");
for(int i=0;ilist.size();i++){
Area area=list.get(i);
out.println("option value='"+area.getId()+"'"+area.getName()+"/option");
}
out.println("/select ");
out.close();
}
总体思路就是如果你选择第一个province(省)的下拉框 会触发一个onchange的事件 然后我们将此事件触发后 调用showCity()这个方法
执行 ajax调用 servlet帮助查找选择的省下面的对应城市数据,然后返回数据后,放入ID="cityDIV"的层中显示.
大概是这样的 如果楼主还有什么不明白的 可以找我讨论讨论
这个是目前在网站中比较流行的技术 如果楼主要简单明了的作业js树 那给我百度消息
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
meta name="author" content="心梦缘ocean ocl" /
titleMy tree demo/title
style type="text/css"
/*主页面样式*/
.leftNav {
width: 20%;
height:500px;
border:#B9E0F7 1px solid;
margin-left: 1%;
margin-right: 1%;
}
#footer {
color:#808080;
line-height: 1.6em;
padding: 0 0 1em 0;
}
/*我的树样式表*/
.treeDiv {
color: #636363;
font-size: 14px;
font-weight: normal;
background-color: #fff;
color: black;
overflow: auto;
padding: 0 0 1em 0;
overflow-x: hidden;
}
.treeNode {
white-space: nowrap;
text-indent: -14px;
margin: 6px 2px 5px 14px;
}
a.treeUnselected:hover, a.treeSelected:hover {
background-color: #BFD9ED;
text-decoration: none;
}
a.treeUnselected, a.treeSelected {
color: black;
padding: 1px 3px 1px 0;
text-decoration: none;
}
a.treeSelected {
background-color: #B9E0F7;
}
a.treeUnselected {
background-color: transparent;
}
.treeSubnodes {
display: block;
}
.treeSubnodesHidden {
display: none;
}
.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {
height: 15px;
margin-left: 5px;
margin-right: 0px;
width: 15px;
}
.treeNode img.treeLinkImage {
cursor: pointer;
}
div.treeNode a, div.treeNode span.apiRoot {
display: inline-block;
margin-left: 24px;
text-indent: 0;
white-space: normal;
width: 95%;
word-wrap: break-word;
}
div.treeNode span.category {
cursor: pointer;
}
/style
/head
body
div class="leftNav"
div id="samplesToc"
div id="tree" style="top: 35px; left: 0px;" class="treeDiv"
div id="treeRoot" onselectstart="return false" ondragstart="return false"
div class="treeNode"
img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"
span onclick="expandCollapse(this.parentNode)" class="category"目录节点一 /span
div class="treeSubnodesHidden"
div class="treeNode"
img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"
span onclick="expandCollapse(this.parentNode)" class="category"目录节点一子目录 /span
div class="treeSubnodesHidden"
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点一/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点二/a
/div
/div
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点六/a
/div
/div
/div
!--end block--
div class="treeNode"
img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"
span onclick="expandCollapse(this.parentNode)" class="category"目录节点二/span
div class="treeSubnodesHidden"
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a
/div
div class="treeNode"
a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a
/div
/div
/div
!--end block--
/div
/div
/div !-- end samplesToc --
/div !-- end leftNav --
div class="right content"
/div!-- end main content--
div id="footer" align="center"
/div!-- end footer--
script type="text/javascript"
var treeSelected = null;//选中的树节点
var imgPlus = new Image();
imgPlus.src="../graphics/treenodeplus.gif";
var imgMinus = new Image();
imgMinus.src="../graphics/treenodeminus.gif";
//父节点展开事件
function expandCollapse(el)
{
//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点
if (el.className!= "treeNode"){
return; //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode
}
var child;
var imgEl;//图片子节点，在树展开时更换图片
for(var i=0; i el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.src)
{
imgEl = child;
}
else if (child.className == "treeSubnodesHidden")
{
child.className = "treeSubnodes";//原来若隐藏，则展开
imgEl.src = imgMinus.src;//更换图片
break;
}
else if (child.className == "treeSubnodes")
{
child.className = "treeSubnodesHidden";//原来若展开，则隐藏
imgEl.src = imgPlus.src;//更换图片
break;
}
}
}
//子节点点击事件，设置选中节点的样式
function clickAnchor(el)
{
selectNode(el.parentNode);
el.blur();
}
function selectNode(el)
{
if (treeSelected != null)
{
setSubNodeClass(treeSelected, 'A', 'treeUnselected');
}
setSubNodeClass(el, 'A', 'treeSelected');
treeSelected = el;
}
function setSubNodeClass(el, nodeName, className)
{
var child;
for (var i=0; i el.childNodes.length; i++)
{
child = el.childNodes[i];
if (child.nodeName == nodeName)
{
child.className = className;
break;
}
}
}
/script
/body
/html
运行效果：
title: JS树结构数据的遍历
date: 2022-04-14
description: 针对项目中出现树形结构数据的时候，我们怎样去操作他
项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式
树的特点
1、每个节点都只有有限个子节点或无子节点；
2、没有父节点的节点称为根节点；
3、每一个非根节点有且只有一个父节点；
4、除了根节点外，每个子节点可以分为多个不相交的子树；
5、树里面没有环路
下面的图片表示一颗树
在下面的JS中我们由多棵树组成我们的数据
在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点
我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的
从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。
简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。
所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：
取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。
深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止
1、先序遍历
访问子树的时候，先访问根再访问根的子树
2、后序遍历
访问子树的时候，先访问子树再访问根
1、先序遍历
先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面
2、后序遍历
后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操作，否则继续扩展子节点到当前节点前面
对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。
广度优先搜索
树的遍历
深度优先搜索
图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）
二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript
JS树结构操作:查找、遍历、筛选、树和列表相互转换
var arr=[];
var fun = function(arr, key){
var result = [];
for(var i=0;iarr.length;i++) result.push(arr[i][key]);
return result;
}
//diaoyong
var result = fun(arr,"treeId");
console.log(result);
1、javascript 获取 Dom 树比较简单。直接获取document 文档对象就可以了，或者也可以直接从具体的控件对象进行获取。
2、比较困难的是如何获取之前旧的dom 树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象，注意此对象保存的只是引用，你做变更，之前保存的对象也是变的，因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象，也就是所谓的深拷贝对象，这个是有点复杂度的，节点如果复杂的话，容易出现问题，要注意处理。
3、希望对你有帮助。
