11. 尚硅谷_佟刚_Ajax_典型应用_三级联动__城市到部门的 Ajax 实现

好了，那没问题的话呢，我们就继续，我们看下边我们需要在页面上来干什么，那我来实现由城市到部门，大家来实现由部门到员工，OK，我们打开这个页面，然后呢，哎，我们说呀，我们需要导入这个j query，这个query。这个名字还不太一样，Copy，那block UI呢，就在搁这放着我用的时候的话呢，我们再说如何来用它，好我们现在我们来先来说这个步骤。怎么写第一部？他说我这个应该获取什么，加什么事件啊，获取这个城市吧，是吧，加什么事件啊嗯，加select加什么事件，加点击事件吧，一点击的话，我让你点它就反应了吧，肯定不是点吧加什么事。

加change是不是当我改的时候它得有反应吧，需要加change是角，所以说第一个就是哎获取KAD吗？添加限制。响应函数。二。添加完这个之后的话呢，我们应该是准备发送AX啊，我们想的啊，准备发送AGX，那么我们再看一下还有什么什么需要说的，比方说我这块我选的是多伦多，然后这块的话呢，显示了一些部门，然后的话呢，我现在啊，我的确是改了是吧，我变成我变成这个请选择了，我问这个时候需要发HX请求吗？不需要吧。

不需要发吧，你选的是空啊，那我我发也没用啊，这是一个，另外一个就是当你选择这个是空的时候，这个部门应该没了吧，这有也没有意义。再说一个。再说一个，我以前比方说是多伦多，我现在的话呢，我选择的是比方说我选择一个这个，呃，西雅图我写完之后的话，我应该在这个基础上把西雅图的这个部门加上吧，但前提是我是不是先得把多伦多那个部门清空了啊，你否则是不是一个累加的过程啊，懂这个意思吧，所以说呃，我们只要一家趁试试卷的时候，我都得先让这个department只保留第一个节点。

而以前有的那些都得删了吧，是这样吧，所以说哎，过来第二个。使。谁呢？指我们这个department只保留第一，第一个open open子节点。必须的，在。获取。选择的直若若该直为，为什么呢？诶这个的话。D这个的话分为什么呀？D选择的是不是选的是这个请选择吧，这个时候不需要发生HX请求，即选择的是请选择。

此时。不需要发送请求，然后前面保留第一个节点，这个事儿已经办完了，因为我们归纳之后，我们发现无论是你选的是是哪一个，只要你改了，你必须得把这个清掉，你否则它的话，它是一个累加，那也不行，好了下一个吧，四若只不为它说明什么呀，说明的确是city发生了。改变，这个时候我们应该怎么样准备？A，请求好吧，4.1准备什么呀？L跟X吗？UL。

我们也是employee，问号等于list。我根据城市获取部门。Department。行了4.2X呢。我们至少需要什么呀，至少需要一个老KID版，老KID我们再加上一个time。别的不需要了吧，一个时间戳好了五哎，请求发过去了，请求发过去之后的话呢，我们就得想是吧，哎，它返回的这个数据结构是个什么呢？它返回的应该是个什么呀，我这一个。

城市可能有很多个部门吧，返回应该是个数主吧，具体说应该是一个杰森数组是吧，杰森数主，然后说诶，返回的。是。一个杰森宿主。我们希望的哈，但这个接近数组啊，有可能我有些城市没有那个部门吧，好OK，这个时候的话呢，我们又得分一下，5.1说，若返回的数组中的原数为为零，那就提示吧。当前城市没有部门。好，5.2说若返回的数组中原数不为零，不为零的话，我需要怎么办呢？变利吧，肯定需要变力啊，然后呢，放建什么节点啊，是不是需要往这里边放啊，为什么节点啊，是不option节点啊。

不是。啊，你说他应该放谁呀，放department ad这个呢，Department，然后并把新创建的。点加为谁呀。用充电没用是吧，我需要把它加为分的子节点呗，CTRLC。

B。完了，就这么个步骤，这边我们可以来写了。我们写代码的话呢，可以分为客户端跟服务端的，我们先来写这个客户端的function。我们这个步骤先获取点change，只要你改了function，我先干一件事，是吧？我让这个department只保留第一个字节点。Apartment啊，Option子节点要求不是第一个倍清除是吧？这个步骤就是跟这个步骤对的哈，然后判断这个值或D等于。

s.VL率值是不是空，如果不等于空的话，我再进行操作。你看这空呃不做这个时候的话呢，我操作，然后的话呢，或URL等于写好了哈，这个。X等于老ID。I。New。

好了，发请求。我这个发请求啊，我获取的是杰森，直接写杰森。URL。贝塔，好，怎么的呢？说if a塔点N等于零，Ler弹出一个信息。当前城市没有部门。Else，我需要进行偏体in I等于零，A小于推塔点S大家，嗯。

哦，这习惯了是吧？哦，OK，获取完这个之后的话呢，我需要获取一个一个这个department ID跟department name或DEP name等于塔。I department ID这个需要跟谁一致啊？跟department这个一致，Department ID department name没问题哈，好了，回来在或ept name等于data I啊，Department name搞定，然后我需要创建一个option节点。把这个节点加为谁呢？节点加为我这个department的节点。它点A主节点应该是option这个样子。

这个位置呢，就要写为。Bbt这个位置呢，需要写为e PT name好了，这样的话呢，我这块这个就写完了。核定好了，下面我们来写服务端，服务端我需要去写一个方法。首先呢，我需要来获取这个请求参数叫ID等于request点。

VOID。啊，然后需要来写一个circle，等于。Department department department name，我这个别名数必须得写啊是吧，它是映射数据库字段跟Java属性之间的这个桥梁是吧，这样的一个中间OK。From。Department。

2D点好KAD等于问号，这写吧，下边我要获取所有的department。Department等于。Base do.for circle.class后面这个值应该是我们可以点。解完我我返回这个不行吧，哎，我需要给他转一下，我们使用Jackson object啊。Map等于new object。然后我们写一个result等于点。

MY.value我直接写department打一下，然后response.side content。Text javascript response get regular than print。嗯，可能会有问题哈，但是我们这个步骤的话呢，写完了就找一个吧。看看效果，这个没有，这个没有，我选一个。好使了吧，西雅图。

没啥问题，我选一个没有的，选一个没有的，这都有哈。再选一个伦敦。墨西哥城没有吧，行，那整个由城市到部门这个就完成了，大家需要完成的是由部门到员工，到底是不是一样啊？OK，你把我这个步骤的话呢，先看一下，然后你来独立的完成由这个部门到员工，这个的话，说完之后的话呢，我们再说那个block UI应该如何来用。