21、尚硅谷_SSM高级整合_新增_Ajax显示部门信息.avi原创

好。那么刚才呢，我们做好了这个点击新增弹出了咱们这个模态框。那么呢，这一块还有一些问题，就是我们弹出模态框的时候，我们的这个部门信息啊，这个下拉列表得有，所以说呢，我们弹出模态框之前，我们应该去数据库啊，发一个as请求，我们给服务器发一个as请求，要到所有的部门信息，把部门信息显示到这个下拉列表中。好，我们来做这个逻辑。然后呢，我们来到咱们这个页面，我们来看好这块呢是弹出，哎，这个是点击新增按钮啊，我们这个功能是点击新增按钮弹出。这个模特框。模态框，而我们现在呢，这个模态框的弹出是下面这个方法，这是弹出模态框。而我们模态框弹出之前，我们应该发送咱们这个A请求，然后呢，查出。

部门信息，部门信息，然后呢，显示在。显示在咱们这个啊下拉列表中。下拉列表中。好，我们呢，这个查部门信息显示下拉列表，我就单独抽一个方法。比如呢，我们就叫get de pts。啊，这个方法呢，它的作用就是呢，查出所有的部门信息。并显示在咱们这个下拉。列表中。方。这方法呢，也非常简单，我们应该是发送一个aja请求，所以说Dollar点上aja，诶，Dollar。

A，请求，然后呢，这个请求啊，我们去向服务器来要我们所有的部门信息，我们来发一个请求APP pass。我们服务器。比如呢，服务器下有一个能处理我们这个请求的，比如它就叫depts，它的作用呢，就是获取所有的部门信息。好，我们不用带什么数据啊，我们这个type，那我们这个type就写成get啊，请求成功以后success。Success方式，当我们请求成功以后呢，我们把这个结果我们拿到，拿到以后呢，哎，这个里边应该都是部门数据，所以说呢，我点log。把咱们这个在我们器的控制打印一下，那么呢，我们就应该有一个这个应。我们来到这个控制器，我来专门创建一个咱们这个ctrler，哎，我们就叫dept CTR。

咱们这个。它的作用呢，就是处理啊，咱们这个和部门有关的请求。处理。处理和咱们这个部门有关的。请求，那么呢？它是一个控制器，我们来填上controller。Controller。好，它是一个控制器，然后。我们假设咱们有一个叫department service，哎，有一个组件叫department service对象，哎，它是呢，我们跟部门有关的业务逻辑组件department service。我们跟部门有关的业务处理啊，都在它里面，它呢是被自动装配进来的。

所以说呢，我们先把这个department service让它创建出来。好创建呢，我们业务逻辑组件就放在service包下。好保存，然后呢，我们来到这一块。我们来写第一个，咱们这个处理请求的方法应该是呢，我们这个返回。所有的咱们这部门信息好，我们来写public，我们所有的返回，这数据的返回，我们都包装成这个message对象，好返回这个message对象就叫get deps。我们先来return。那么呢，我们来假设呢，我们department service里边有一个方法就叫get deps，他呢帮我们查出所有的部门信息，这个部门信息帮我们包装成一个list department对象。

好，他帮我们来查这个department。所有的部门信息呢，包装成一个list，那我们先把这个方法创建出来。好，我们这个department service呢，它是一个业务逻辑service。好，然后呢，它里边的这个方法来查，查的时候呢，它要用到member，就是我们这个department member，哎，让它自动注入就行。好自动输入，然后呢，我们来调用department。查询所有部门的方法，哎，有一个叫叫SELECT8EXAMPLE，按照条件查询，而我们查所有没有什么条件，所以说呢，直接传一个，那他会帮我们返回查出的所有部门，把这个部门我们直接返回就行了。好，这个方法我们就写完了，因为department member是自动生成的，所以说呢，我们不用管，来到这儿。

好，来到这以后呢，这是我们查出的，查出的所有。部门信息。把这个返回好，我们message第一个快捷的success成功来添加我们自定义的数据and k，好，我们比如就叫epts。这第的list给它传进来，那我们这个给我们器返回过去，好，那这个方法它处理的请求request。它处理的请求呢，就是我们当前项目下的这个depts请求。好，我们这个处理方法就写好了，包括呢，我们的这个list页面我们来看啊，我们这个首页页面，我们打开模态框之前，我们会发送查询所有部门信息的，咱们这个方法我们看控制台会不会有打印。我来重启一下服务器。

好，我们重启一下服务器，那么之前呢，我们这个服务器经常老出问题啊，大家就设置一下，怎么设置呢？我们来看啊这个服务器双击一下。双击一下呢，来到咱们这个服务器的设置。这有一个啊models，然后呢，这是我们带的项目，我们让它这个项目，哎，默认这个字自动部署，自动重新加载，是勾中的，我们把它去掉啊，我们什么时候要自己自动启动了，我们就重新啊，自己restart一下，要不然每次这个一判断有修改，自动启动老是出现问题啊，这个修改以后呢，我们来启动，重新来测试。好，我们呢，测试咱们这个首页来F12。好，我们来刷新。刷新咱们这个首页好，刷新咱们这个首页呢，咱们这个员工信息先是显示出来，我们来看他发的请求啊，这个请求里边呢，都是咱们这个显示员工信息EPS好。

接下来如果我来点击咱们这个新增按钮，要弹出模态框，弹模态框之前呢，查出所有部门信息点。好，你看模态框弹传弹出来，我们这个部门信息的返回的接算对象也在这X extend的里边有一个depts的咱们这个数组，这个数组里边就有我们要用的内容，诶返回出来的内容就是这样。所以说呢，我们把部门信息拿到，这是我们的请求，我们来看它相应的内容。好，最终返回给我们的切字符串是这样的。我们只要取到extend里边所有的这个部门信息，哎，我们显示在下拉列表中就行，好，那么这一块呢，我们就不打印了，我们在这儿，哎，显示部门信息在咱们这个下拉列表中。

好，我们这个下拉列表在模态框中我们来找到，好，这是我们员工添加的模态框，模态框里边有一个select标签，我们直接给他给一个ID就好找了啊，我们比如呢就叫dept。DEP啊，咱们这个下拉列表啊，它是在咱们这个添加表单里。添加的这个。表单里边的。啊。把这个下拉列表呢，我们来。给他锁定。走好这个下拉列表，我们可以用ID找，当然大家也可以不用ID找，我们来再来提供一种不用ID找的办法。我们呢，假设呢，我把这个ID我来剔除掉，这不用ID找怎么找呢？诶其实呢，我们这个下拉列表就在我们这个，呃，员工添加的模态框里边，只有一个这个下拉列表，所以说呢，我们就直接转。

直接找到这个模态框，它下边的这个select标签就行了，因为这个标签只有一个。我们要把部门信息添加到这个里边，所以说呢，我们首先哎。相当于给这里边我们来end每一个option。啊，每一个option就行了，而这里边的option我们都是便利到每一个部门信息拼装的，好，我把它除掉。我来电力部门信息。到点H好。便利呢，我们是便利，我们result返回结果里边的extent。啊，假设呢，我这里边不传参了，那我们也可以用这个this表示当前被便利的对象啊，也是可以的。

如果用传参了，你也可以拿你传的第二个参数，就代表当前比例的元素。好。我们来便利，便利呢，我们来看啊，接下来我们便利的每一个元素都是一个部门信息，所以说呢，我们根据这些我们来构建一个option的咱们这个元素。哎，我们来构建一个咱们这个option。哦，不是。而这个option，它它里边的这个内容啊，我们添加的这个下拉选项应该是我们这个部门名，所以说呢，我给它里边呃，碰到一个。咱们这个开发部。啊的一个开发部，而咱们这个option我们要提交，哎，它会有这个VALUE6值，所以说呢，这块的value值应该是我们啊要提交的部门的ID，所以说呢，我们给他再附一个值点at tr。

我们给它Y值，给一个值，这个值呢，就是部门的ID，哎，这个部门ID呢，因为我们这个this代对象，代表当前正在便利的元素，就是这么一整个部门对象，然后呢，啊，它的这个ID，哎，我们拿到。This。当前便利对象的department ID，那当然这一块point就不是开发部了，我们有开发部，还有测试部，我们的应该是他部门的咱们这个名字，所以说呢，This点咱们部门名。好，我们来看啊，这个option就构建好了，把这个option。诶，我们点呃喷to，诶我们添加到我们这个啊，员工添加的模态框中的下拉列表中就行了啊。每次便利一个部门一添加啊，我们这个就写好了，我来重启，你们看行不行。

啊，重启服务器，拿到所有部门信息以后，我们在这里边构建出部门的下拉列表。好，把它关掉，我们来刷新，刷新我们来看。好，点击新增走，诶部门信息已经出来了，那右键检查元素。你看啊，每一个部门信息的option，诶，我们要提交的Y6值也有提示信息在这儿也有，好，那这就没问题了，接下来我们就剩做了啊，数据填入以后，我们点保存就保存员工即可。