day04【后台】角色维护/14-尚硅谷-尚筹网-角色维护-新增-代码：前端

那么具体的后边这个我们的操作哈。咱们先解决一下这个页面。引入茅台框的这部分。首先呢，我们去创建一个。GP文件。这是我们外边的JSP文件，就是它。把这个JP文件建出来。然后呢，去加入模态框的代码。这个代码都是HM的代码哈。都是一条毛的对吧。哎，就他。

这里边儿有几个地方呢，我们要标记一下。首先是整个模态框的ID。就是这个用有这个才能将来操作这个模台框。然后呢，这个标题我们改了一下。还有呢，这个表。这给他来了一个表单啊，就是为了这样一个，这只是为了样式。哎，为了将来能够获取到它啊，这个地方指定一下这个内幕。别的都还好。别的去掉一个按钮，保留了一个按钮。不过他其实将来也需要绑定单写函数啊，所以说给他也给他来一个ID。嗯，这个叫做save。RO吧。CTRLC啊，我们这页给它加上。然后呢，这个第三步就是说在我们肉配置。

然后去，哎，去引入。上面的文件。引入就是我们include。嗯。从从语法上，Bootrip这边呢，这个东西是bootsrip提供的啊，Bootrip提供的，它bootrip呢没有什么特殊的要求，这个放哪儿也行。啊，咱们那咱们，但是咱们说肯定咱们不要乱放啊，咱们就放到这个页面的最后啊。模态框默认。情况。默认情况下是隐藏的。为了页面的整洁。我们统一。放在最后的位置。好嘞，这是模态框引入进来了。呃，另外下一步呢，是我们这个。

打开茅台框。么打开模态框。哎，那么首先的话是给新增按钮绑定单函数。这个新增按钮本身呢，我们要改一下。啊，这样吧，啊。那么这个作为第二步哈。第一步呢，是修改一下新增的按钮。他以前有个on click那个得给他去掉。给他加了一个ID。哎，去掉。了原来的。

这个属性啊好嘞，然后呢，给它去绑定一下这个单小函数。嗯，把这个打开。CTRLC。嗯。下一步其实下一步这事比较好办，就是说点这个保存啊，然后去拿这个，然后去发请求。所以说下一步呢，下一步我们要做的事就是叫执行。执行保存。这又分这么几步啊，第一步呢是前端的代码。啊，然后我们再看这个后端的代码。前端的这个代码呢，我们要。呃，给这个保存按钮。保存按钮，这里边儿的保存的按钮。绑定单小数啊，去找到根据它的ID。

新增模态框中的。保存按钮绑定。单击响应函数。Click。啊，我稍微插一句就是什么呢。不知道会不会有同学们会会想这个问题哈，你后来写的这几个怎么又不放到这个外边的这个这个这个叫啥？GS文件里边的，那么他们放这里边儿，你这几个怎么不放。要放。当然其实也可以。啊，语法上在运行应该是没有什么问题，我是这么考虑的哈，就是说如果是我们封装的函数。啊，你看这些都是封装的函数啊，就放在外边，如果就是直接对当前页面的。呃，元素啊，或者说这个叫盗墓对象呢，去操作的话，我们就放在这个页面。

啊，也就是说我们对当前页面的东西操作就还在当前页面这写，如果说是抽取出来的函数，为了有重复性的操作抽取出来，那么我们就放到外边这个JS文件里边。啊，是是这么一个一个一个原则来划分的啊。是根据这个我们来这个这这些呢，呃，直接绑定函数的这个就不放到外边了。哎，那么这里边儿呢，它的第一步啊，第一步就是。呃，我们首先呢，先得去获取一下。用户在文本框中。输入的角色名称。我们去一个real name哈。它呢，等于。哎，这个的。当然给ID当然也行，假如说没有ID，如果我们靠的是它的话。哦对，这有个问题啊，将来我们这个页面上还会有一个更新的，更新的呢，它也会有一个肉内膜。

是吧，这个时候这个是一样的。啊，这个这个ID号不用这个哈。这是一个，这是一个残留的。其实如果我们要区分的话，咱们可以这么干。就这些标签。就整个这些标签都在这个标签的里边，对他来说呢，这是一个后代元素。就是说我们这儿可以这么干。我们从这里边来取。空格表示后代元素。然后呢，内等于肉内。这个这个是。是代表是这个整个的。然后空格表示在后代元素里边找。

再然后呢，这个某个属性等于一个什么值，哎，这个是这么写啊，这个是解块的属性选择写。啊，你要是觉得这个复杂的话，你不太好整的话，你就给他这你给他标记个ID。就直接拿这ID去找啊。就可以了啊。然后呢，我们可以给这个东西吧，也可以给它去一下前后空格。我在这写一下吧啊。这个表示找到整个模态框。哎，然后呢，这个空格。表示在后代。元素中。继续查找。然后呢，这个表示。

匹配。匹配。嗯。就是。Name。属性。呃，肉内的元素。啊，就是说表示在后代元素。这个。就它本身是这个意思啊，前面这个空格表示在后代元素里边去查找。哎，然后这个是去去前后空格，拿到它以后呢，下一步我们就可以去发送AX请求。哎，然后这边是个肉C肉。Save。Type。

是个post。Data。我们要发送数据，就这一个啊。Real name。就是这个肉内膜。Data type。服务器返回的是Json。哎，这个响应。嗯。呃，如果出错的话呢，咱们就列message。一个。Response。Response，点那个叫做status。哎，然后加上一个空格，加上response.status text，显示一下显要状态码和响应状态码的说明。

那如果说是成，如果说是能够成功的话呢。对，但这个里边吧，还得再判断一下啊，我们去问一个result。哎，如果说这个result等于success。那么咱们就列一个。操作成功。嗯。如果等于fail的。那就是操作失败。然后后边呢，把这个消息带上啊，我们得知道这个出了什么事了。还有呢，再往下就是说我们刚才说的这些个后续的操作。

后续操作有这么四个啊，关闭模态框，咱们一个一个做啊。那么其实你成功也好，失败也好呢，都应该关闭模态框啊，他下次再重新操作，那就再重新打开。所以说呢，我们关闭模态框呢，就到高了点AX这个函数的后边哈。啊，这个其实也无所谓先后啊，他一步的有先有后也没关系。前面这个打开，这是打开。这个关闭怎么关闭呢。Hide。哎，把它重新隐藏了就好了，哎。台，这个是关闭模台泡。哎，再看下一个操作是。显示操作结果，这个我们已经已经显示了。哎，清理模态框。嗯。清理那块。他跟成功失败呢，你成功也应该清理掉，失败也应该清理掉是吧。

这个就是说。那么就是说看看我们这个input啊，就是就是它。在Y流属性里边传个空字符串，就把它给清掉了。哎，清理茅台花。再下来呢，重新加载分页。分页的数据。那就是重新去调我们分页的那个函数。重新去走这个就行了。当然这里边儿有个问题，就是说呢，你新增的就会跑到应该是最后一页的最后一条记录。如果我们想去最后一页的话呢？那就把这个window点。配置number，给它改一个很大的值就就得了。别整太大啊，他万一一出来就不好了。

啊，六个九，什么时候咱们银行存款余额能有这么多就可以了啊。我也，我也要奋斗。我也得奋斗。拉倒吧。去掉两位还差不多。但是。看看看看这个地方其实有个问题哈。其实如果失败的话吧，如果失败的话呢。就还在当前页面，其实还是不动比较好。成功的话再去最后一页。所以说吧，干脆呢。干脆就把这个吧，我们放到这个成功的，成功了咱们再重新加载分解再去，如果没成功的话，咱就甭动了。意义不大对吧，他失败了，估计他也没保存上，咱也就没有必要再让他去看了，咱们也就不需要再重新加载这个分页啊。

所以说在这儿呢，我们去调整一下啊，说这个叫做。嗯。将页码。定位到最后。啊。行，这是我们前端的代码差不多，咱就诶是这么个意思，呃，下一步呢，咱们看看啊，咱们得发这个请求。呃，看看这个，我们得写一下这个后端的代码。