持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

上一篇我们在bootstrap的表格里增加功能按钮，并编写了对应的弹出框来展示编辑框，这一篇编写后端代码和前端处理逻辑，来将这个编辑功能实现。

这个项目的链接是：https://github.com/Amor122/MyTest.git

我已经设置了公开权限，大家都可以访问，项目每天的进度基本上是和文章更新一致的，或者略快于文章，我也是边写边发的，有些代码在后续版本说不定就更改了。代码的字数意义不大，有需要的都可以去项目上直接看，这里我都换成了图片。

一、     实现步骤

 

(一)      前端数据提交和接收

首先是给编辑框修改提交按钮添加点击事件

 

编辑事件的实现是先将表单内部的数据封装为一个对象，类似于字典的形式。

再通过ajax的方式将这个数据提交给服务器处理。

ajax中url就是接口地址，method是方法，dataType指的是返回数据的处理类型，data就是我们传给接口地址的数据，

success是成功的处理结果，error是失败的处理结果。

在success中我们可以通过返回的信息来判断后续操作，返回信息在后台封装。

这里引入了toastr.js来实现提示信息，会比较方便。

修改完成后关闭这个模态框。并需要调用我们的刷新函数对这个表格数据进行刷新。

 

 

 

(二)      后台逻辑处理数据

 

后台逻辑中通过接收参数，将这几个要修改的信息都提取出来，并进行校验，异常捕获处理的是数据的唯一键值重复的问题，意味着修改的时候将重复的人员编号放进去了，用了别人的编号。返回给前端页面的就是修改的状态信息。